확인란 그룹에 HTML5“필수”속성을 사용하십니까?
HTML5를 지원하는 최신 브라우저를 사용하는 경우 (예 : FireFox 4);
양식 필드에는 속성이 있습니다 required='required'.
양식 필드가 비어 있거나 비어 있습니다.
제출 버튼이 클릭됩니다.
브라우저는 "필수"필드가 비어 있음을 감지하고 양식을 제출하지 않습니다.
대신 브라우저는 사용자에게 필드에 텍스트를 입력하도록 요청하는 힌트를 표시합니다.
이제 단일 텍스트 필드 대신 확인란 그룹 이 있는데 그중 하나가 사용자가 확인 / 선택해야합니다.
required이 확인란 그룹 에서 HTML5 속성을 어떻게 사용 합니까? (확인란 중 하나만 선택하면되므로 required각 확인란마다 속성을 넣을 수 없습니다 )
추신. 중요한 경우 simple_form을 사용 하고 있습니다.
최신 정보
수 HTML 5 multiple속성은 여기에 도움이 될? 내 질문과 비슷한 것을하기 전에 누군가 그것을 사용 했습니까?
최신 정보
나타납니다 :이 기능은 HTML5 스펙에서 지원하지 않는 것을 ISSUE-111 :. @ 입력하지 @type = 체크 박스에 대한 평균 필요한 무엇?
(문제 상태 : 문제는 편견없이 폐쇄 된 것으로 표시되었습니다. ) 그리고 여기에 설명이 있습니다.
업데이트 2
그것은 오래된 질문이지만 질문의 원래 의도는 Javascript를 사용하지 않고 즉, HTML5 방식으로 위의 작업을 수행 할 수 있다는 것을 분명히하고 싶었습니다. 돌이켜 보면, "자바 스크립트없이"를 더 눈에 띄게 만들어야했습니다.
불행히도 HTML5는 즉시 사용 가능한 방법을 제공하지 않습니다.
그러나 jQuery를 사용하면 확인란 그룹에 하나 이상의 확인 된 요소가 있는지 쉽게 제어 할 수 있습니다.
다음 DOM 스 니펫을 고려하십시오.
<div class="checkbox-group required">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
</div>
이 표현을 사용할 수 있습니다 :
$('div.checkbox-group.required :checkbox:checked').length > 0
true적어도 하나의 요소가 검사되면 반환 합니다. 이를 바탕으로 유효성 검사를 구현할 수 있습니다.
간단한 트릭입니다. 이것은 required속성이 선택되어 있으면 속성 을 변경하여 html5 유효성 검사를 활용할 수있는 jQuery 코드입니다 . 다음은 HTML 코드입니다 (그룹의 모든 요소에 필수를 추가해야합니다).
<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5
다음은 jQuery 스크립트이며,이 중 하나를 선택하면 추가 유효성 검사가 비활성화됩니다. 이름 요소를 사용하여 선택하십시오.
$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)
$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
$cbx_group.prop('required', false);
}
여기에 작은 문제가 있습니다. html5 유효성 검사를 사용하고 있으므로 유효성 검사 전에 양식을 제출하기 전에이를 실행하십시오.
// but this might not work as expected
$('form').submit(function(){
// code goes here
});
// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
// skipping validation part mentioned above
});
나는 이것을 수행하는 표준 HTML5 방법이 없다고 생각하지만 jQuery 라이브러리를 사용하지 않는다면 webshims ' " group-required "유효성 검사 기능을 사용하여 "체크 박스 그룹"유효성 검사를 수행 할 수 있었다 .
확인란에 '그룹 필수'클래스가있는 경우 양식 / 문서 내에서 이름이 같은 확인란 중 하나 이상을 선택해야합니다.
사용 방법에 대한 예는 다음과 같습니다.
<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
나는 주로 웹 심을 사용하여 HTML5 기능을 폴리 필하지만, 이와 같은 훌륭한 옵션 확장 기능도 있습니다.
자신 만의 사용자 지정 유효성 규칙을 작성할 수도 있습니다. 예를 들어 입력 이름을 기반으로하지 않은 확인란 그룹을 만들어야했기 때문에 자체 유효성 규칙을 작성했습니다 ...
HTML5는 확인란 그룹에서 하나 이상의 확인란 만 선택하도록 요구하지 않습니다. 다음은 Javascript를 사용하는 솔루션입니다.
HTML
<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two
자바 스크립트
function deRequireCb(elClass) {
el=document.getElementsByClassName(elClass);
var atLeastOneChecked=false;//at least one cb is checked
for (i=0; i<el.length; i++) {
if (el[i].checked === true) {
atLeastOneChecked=true;
}
}
if (atLeastOneChecked === true) {
for (i=0; i<el.length; i++) {
el[i].required = false;
}
} else {
for (i=0; i<el.length; i++) {
el[i].required = true;
}
}
}
자바 스크립트는 하나 이상의 확인란이 선택되어 있는지 확인한 다음 전체 확인란 그룹이 필요하지 않습니다. 선택된 하나의 확인란이 선택 해제되면 모든 확인란이 다시 필요합니다!
나는 같은 문제가 있었고 내 해결책은 다음과 같습니다.
HTML :
<form id="processForm.php" action="post">
<div class="input check_boxes required wish_payment_type">
<div class="wish_payment_type">
<span class="checkbox payment-radio">
<label for="wish_payment_type_1">
<input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
</label>
</span>
<span class="checkbox payment-radio">
<label for="wish_payment_type_2">
<input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
</label>
</span>
<span class="checkbox payment-radio">
<label for="wish_payment_type_3">
<input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
</label>
<input id='submit' type="submit" value="Submit">
</div>
</form>
JS :
var verifyPaymentType = function () {
var checkboxes = $('.wish_payment_type .checkbox');
var inputs = checkboxes.find('input');
var first = inputs.first()[0];
inputs.on('change', function () {
this.setCustomValidity('');
});
first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}
$('#submit').click(verifyPaymentType);
https://jsfiddle.net/oywLo5z4/
@thegauraw와 @Brian Woodward의 답변에서 영감을 얻은 다음은 사용자 정의 유효성 검사 오류 메시지를 포함하여 JQuery 사용자를 위해 약간 가져 왔습니다.
$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function() {
if ($cbx_group.is(":checked")) {
// checkboxes become unrequired as long as one is checked
$cbx_group.prop("required", false).each(function() {
this.setCustomValidity("");
});
} else {
// require checkboxes and set custom validation error message
$cbx_group.prop("required", true).each(function() {
this.setCustomValidity("Please select at least one checkbox.");
});
}
});
내 양식에는 기본적으로 일부 확인란이 선택되어 있습니다.
JavaScript / JQuery 마법사 중 일부가 더 강화할 수 있습니까?
안녕하세요. 확인란 그룹에 추가로 텍스트 상자를 사용하십시오. 확인란을 클릭하면 해당 텍스트 상자에 값을 입력하십시오. 텍스트 상자가 필요하고 읽기 전용인지 확인하십시오.
html5로 쉽게 할 수 있습니다 .jquery 코드를 추가하면됩니다.
HTML
<form>
<div class="form-group options">
<input type="checkbox" name="type[]" value="A" required /> A
<input type="checkbox" name="type[]" value="B" required /> B
<input type="checkbox" name="type[]" value="C" required /> C
<input type="submit">
</div>
</form>
jquery
$(function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
I added an invisible radio to a group of checkboxes. When at least one option is checked, the radio is also set to check. When all options are canceled, the radio is also set to cancel. Therefore, the form uses the radio prompt "Please check at least one option"
- You can't use
display: nonebecause radio can't be focused. - I make the radio size equal to the entire checkboxes size, so it's more obvious when prompted.
HTML
<form>
<div class="checkboxs-wrapper">
<input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
<input type="checkbox" name="option[]" value="option1"/>
<input type="checkbox" name="option[]" value="option2"/>
<input type="checkbox" name="option[]" value="option3"/>
</div>
<input type="submit" value="submit"/>
</form>
Javascript
var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
var isAtLeastOneServiceSelected = false;
for(var i = inputs.length-1; i >= 0; --i) {
if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
}
radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
inputs[i].addEventListener('change', checkCheckboxes)
}
CSS
.checkboxs-wrapper {
position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-appearance: none;
pointer-events: none;
border: none;
background: none;
}
https://jsfiddle.net/codus/q6ngpjyc/9/
Here is another simple trick using Jquery!!
HTML
<form id="hobbieform">
<div>
<input type="checkbox" name="hobbies[]">Coding
<input type="checkbox" name="hobbies[]">Gaming
<input type="checkbox" name="hobbies[]">Driving
</div>
</form>
JQuery
$('#hobbieform').on("submit", function (e) {
var arr = $(this).serialize().toString();
if(arr.indexOf("hobbies") < 0){
e.preventDefault();
alert("You must select at least one hobbie");
}
});
That's all.. this works because if none of the checkbox is selected, nothing as regards the checkbox group(including its name) is posted to the server
'Programing' 카테고리의 다른 글
| 브리지 패턴은 언제 사용합니까? (0) | 2020.06.13 |
|---|---|
| Shapeless에서 Nat 유형의 한계 (0) | 2020.06.13 |
| NW.js, Brackets-Shell 및 Electron의 기능적 차이점은 무엇입니까? (0) | 2020.06.13 |
| 최선의 분산 형 무차별 대입 대책은 무엇입니까? (0) | 2020.06.13 |
| 스위치 / 패턴 매칭 아이디어 (0) | 2020.06.13 |