확인란 그룹에 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');
        }
    });
});

확인란 그룹에 보이지 않는 라디오를 추가했습니다. 적어도 하나의 옵션을 확인하면 라디오도 확인하도록 설정됩니다. 모든 옵션이 취소되면 라디오도 취소되도록 설정됩니다. 따라서이 양식에는 "적어도 하나 이상의 옵션을 확인하십시오"라는 라디오 프롬프트가 사용됩니다.

• display: none라디오에 초점을 맞출 수 없으므로 사용할 수 없습니다.
• 라디오 크기를 전체 확인란 크기와 동일하게 만들므로 메시지가 표시되면 더 분명합니다.

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>

자바 스크립트

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/

안녕하세요. 확인란 그룹에 추가로 텍스트 상자를 사용하십시오. 확인란을 클릭하면 해당 텍스트 상자에 값을 입력하십시오. 텍스트 상자가 필요하고 읽기 전용인지 확인하십시오.

나는 여기에 수많은 솔루션이 있다는 것을 알고 있지만, 내가 가진 모든 요구 사항을 충족시키지 못했습니다.

• 커스텀 코딩 불필요
• 페이지로드시 코드 작동
• 커스텀 클래스 불필요 (체크 박스 또는 부모)
• nameAPI를 통해 Github 문제를 제출하기 위해 동일한 것을 공유하기 위해 여러 개의 체크 박스 목록이 필요했으며 이름 label[]을 사용하여 많은 양식 필드 (두 개의 체크 박스 목록과 일부 선택 및 텍스트 상자)에 레이블을 할당했습니다. 같은 이름이지만 시도해보기로 결정했습니다.

이것에 대한 유일한 요구 사항은 jQuery입니다. 이를 @ewall의 훌륭한 솔루션과 결합하여 사용자 지정 유효성 검사 오류 메시지를 추가 할 수 있습니다.

/* required checkboxes */
(function ($) {
	$(function () {
		var $requiredCheckboxes = $("input[type='checkbox'][required]");

		/* init all checkbox lists */
		$requiredCheckboxes.each(function (i, el) {
			//this could easily be changed to suit different parent containers
			var $checkboxList = $(this).closest("div, span, p, ul, td");

			if (!$checkboxList.hasClass("requiredCheckboxList"))
				$checkboxList.addClass("requiredCheckboxList");
		});

		var $requiredCheckboxLists = $(".requiredCheckboxList");

		$requiredCheckboxLists.each(function (i, el) {
			var $checkboxList = $(this);
			$checkboxList.on("change", "input[type='checkbox']", function (e) {
				updateCheckboxesRequired($(this).parents(".requiredCheckboxList"));
			});

			updateCheckboxesRequired($checkboxList);
		});

		function updateCheckboxesRequired($checkboxList) {
			var $chk = $checkboxList.find("input[type='checkbox']").eq(0),
				cblName = $chk.attr("name"),
				cblNameAttr = "[name='" + cblName + "']",
				$checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr);

			if ($checkboxList.find(cblNameAttr + ":checked").length > 0) {
				$checkboxes.prop("required", false);
			} else {
				$checkboxes.prop("required", true);
			}
		}

	});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="post.php">
<div>
	Type of report:
</div>
<div>
	<input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required>
	<label for="chkTypeOfReportError">Error</label>

	<input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required>
	<label for="chkTypeOfReportQuestion">Question</label>

	<input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required>
	<label for="chkTypeOfReportFeatureRequest">Feature Request</label>
</div>

<div>
	Priority
</div>
<div>
	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required>
	<label for="chkPriorityHigh">High</label>


	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required>
	<label for="chkPriorityMedium">Medium</label>


	<input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required>
	<label for="chkPriorityMedium">Low</label>
</div>
<div>
	<input type="submit" />
</div>
</form>

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");
    }
});

이것이 전부입니다. 확인란이 선택되지 않은 경우 확인란 그룹 (이름 포함)이 서버에 게시되는 것과 관련이 없기 때문에 작동합니다.

시험:

self.request.get('sports_played', allow_multiple=True)

또는

self.request.POST.getall('sports_played')

더 구체적으로:

확인란 배열에서 데이터를 읽을 때 배열에 다음이 있는지 확인하십시오.

len>0 

이 경우 :

len(self.request.get('array', allow_multiple=True)) > 0