ใช้แอตทริบิวต์ HTML5“ ต้องมี” สำหรับกลุ่มของช่องทำเครื่องหมายหรือไม่?

เมื่อใช้เบราว์เซอร์ใหม่ที่รองรับ HTML5 (FireFox 4 เป็นต้น);
และเขตข้อมูลฟอร์มมีแอตทริบิวต์required='required';
และเขตข้อมูลฟอร์มว่าง / ว่างเปล่า
และคลิกปุ่มส่ง
เบราว์เซอร์ตรวจพบว่าช่อง "จำเป็น" ว่างเปล่าและไม่ได้ส่งแบบฟอร์ม;
เบราว์เซอร์จะแสดงคำใบ้ที่ขอให้ผู้ใช้พิมพ์ข้อความลงในฟิลด์แทน

ตอนนี้แทนที่จะมีฟิลด์ข้อความเดียวฉันมีกลุ่มของช่องทำเครื่องหมายซึ่งต้องมีการตรวจสอบ / เลือกอย่างน้อยหนึ่งรายการโดยผู้ใช้

ฉันจะใช้requiredคุณสมบัติHTML5 ในช่องทำเครื่องหมายกลุ่มนี้ได้อย่างไร (เนื่องจากต้องทำเครื่องหมายที่ช่องเดียวเท่านั้นฉันจึงไม่สามารถใส่requiredแอตทริบิวต์ในแต่ละช่องทำเครื่องหมายได้)

PS ฉันกำลังใช้simple_formถ้ามันสำคัญ

UPDATE

อาจHTML 5 multipleแอตทริบิวต์จะเป็นประโยชน์ต่อที่นี่? มีใครใช้ก่อนทำสิ่งที่คล้ายกับคำถามของฉัน

UPDATE

มันปรากฏว่าคุณลักษณะนี้จะไม่ได้รับการสนับสนุนจากสเปค HTML5 นี้: ISSUE-111: สิ่งที่ไม่จำเป็นต้องใช้การป้อนข้อมูล @ เฉลี่ยสำหรับ @type = ช่องทำเครื่องหมาย.

(สถานะปัญหา: ปัญหาที่ถูกทำเครื่องหมายปิดโดยปราศจากอคติ. ) และนี่คือคำอธิบาย

อัพเดท 2

มันเป็นคำถามเก่า แต่ต้องการชี้แจงว่าเจตนาดั้งเดิมของคำถามนั้นสามารถทำได้โดยไม่ต้องใช้ Javascript - เช่นใช้ HTML5 ในการดำเนินการ เมื่อมองย้อนกลับไปฉันควรทำให้ "ไม่ใช้ Javascript" มากกว่านี้

น่าเสียดายที่ 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ถ้ามีการตรวจสอบอย่างน้อยหนึ่งองค์ประกอบ จากนั้นคุณสามารถใช้การตรวจสอบความถูกต้องของคุณ

มันเป็นเคล็ดลับง่ายๆ นี่คือรหัส jQuery ที่สามารถใช้ประโยชน์จากการตรวจสอบ html5 โดยการเปลี่ยนrequiredคุณสมบัติหากมีการตรวจสอบใด ๆ ต่อไปนี้เป็นรหัส 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);
}

Gotcha ขนาดเล็กที่นี่: เนื่องจากคุณใช้การตรวจสอบความถูกต้อง 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 :

เอกสารสำหรับกลุ่มที่ต้องการพูด:

หากช่องทำเครื่องหมายมีคลาส 'ต้องใช้กลุ่ม' อย่างน้อยหนึ่งช่องทำเครื่องหมายที่มีชื่อเดียวกันภายในฟอร์ม / เอกสารจะต้องตรวจสอบ

และนี่คือตัวอย่างของวิธีที่คุณจะใช้:

<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" />

ฉันส่วนใหญ่ใช้ webshims เพื่อคุณสมบัติ polyfill 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

JAVASCRIPT

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

โปรดทราบว่าแบบฟอร์มของฉันมีช่องทำเครื่องหมายบางส่วนตรวจสอบโดยค่าเริ่มต้น

บางทีตัวช่วยจาวาสคริปต์ / 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/

สวัสดีเพียงแค่ใช้กล่องข้อความเพิ่มเติมในกลุ่มของกล่องกาเครื่องหมายเมื่อคลิกที่กล่องกาเครื่องหมายใด ๆ ให้ใส่ค่าลงในกล่องข้อความนั้นทำให้กล่องข้อความนั้นจำเป็นและจำเป็นต้องอ่านอย่างเดียว

ฉันรู้ว่ามีคำตอบมากมายที่นี่ แต่ฉันพบว่าไม่มีคำตอบใดที่ตรงตามความต้องการของฉัน:

• ไม่จำเป็นต้องมีการเข้ารหัสที่กำหนดเอง
• รหัสทำงานบนการโหลดหน้า
• ไม่ต้องการคลาสที่กำหนดเอง (ช่องทำเครื่องหมายหรือพาเรนต์)
• ฉันต้องการรายการช่องทำเครื่องหมายหลายรายการเพื่อแบ่งปันสิ่งเดียวกันnameสำหรับการส่งปัญหา Github ผ่านทาง API ของพวกเขาและใช้ชื่อ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