Sử dụng thuộc tính yêu cầu HTML5 của HTML5 cho một nhóm các hộp kiểm?

Khi sử dụng các trình duyệt mới hơn hỗ trợ HTML5 (ví dụ FireFox 4);
và một trường biểu mẫu có thuộc tính required='required';
và trường biểu mẫu trống / trống;
và nút gửi được nhấp;
các trình duyệt phát hiện trường "bắt buộc" trống và không gửi biểu mẫu;
thay vào đó trình duyệt hiển thị một gợi ý yêu cầu người dùng nhập văn bản vào trường.

Bây giờ, thay vì một trường văn bản duy nhất, tôi có một nhóm các hộp kiểm , trong đó ít nhất một trường nên được kiểm tra / chọn bởi người dùng.

Làm cách nào tôi có thể sử dụng requiredthuộc tính HTML5 trên nhóm hộp kiểm này? (Vì chỉ cần kiểm tra một trong các hộp kiểm, tôi không thể đặt requiredthuộc tính trên mỗi hộp kiểm)

ps. Tôi đang sử dụng Simple_form , nếu điều đó quan trọng.

CẬP NHẬT

Các thể HTML 5 multiplethuộc tính thể hữu ích ở đây? Có ai sử dụng nó trước đây để làm một cái gì đó tương tự như câu hỏi của tôi?

CẬP NHẬT

Dường như tính năng này không được hỗ trợ bởi thông số HTML5: ISSUE-111: Nhập liệu. @ Bắt buộc có nghĩa gì cho hộp kiểm @type =?

(Trạng thái sự cố: Vấn đề đã được đánh dấu đóng mà không ảnh hưởng. ) Và đây là lời giải thích .

CẬP NHẬT 2

Đó là một câu hỏi cũ, nhưng muốn làm rõ rằng mục đích ban đầu của câu hỏi là có thể thực hiện những điều trên mà không cần sử dụng Javascript - tức là sử dụng cách thức HTML5 để thực hiện. Nhìn lại, tôi nên làm cho "không có Javascript" trở nên đáng ghét hơn.

Thật không may, HTML5 không cung cấp cách thức vượt trội để làm điều đó.

Tuy nhiên, bằng cách sử dụng jQuery, bạn có thể dễ dàng kiểm soát nếu một nhóm hộp kiểm có ít nhất một thành phần được kiểm tra.

Hãy xem xét đoạn mã DOM sau:

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

Bạn có thể sử dụng biểu thức này:

$('div.checkbox-group.required :checkbox:checked').length > 0

trả về truenếu ít nhất một phần tử được kiểm tra. Dựa vào đó, bạn có thể thực hiện kiểm tra xác nhận của mình.

Đây là một mẹo đơn giản. Đây là mã jQuery có thể khai thác xác thực html5 bằng cách thay đổi các requiredthuộc tính nếu bất kỳ cái nào được chọn. Sau đây là mã html của bạn (đảm bảo rằng bạn thêm yêu cầu cho tất cả các yếu tố trong nhóm.)

<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

Sau đây là tập lệnh jQuery, vô hiệu hóa kiểm tra xác nhận thêm nếu có bất kỳ ai được chọn. Chọn sử dụng phần tử tên.

$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 nhỏ ở đây: Vì bạn đang sử dụng xác thực html5, hãy đảm bảo bạn thực hiện điều này trước khi nó được xác thực tức là trước khi gửi biểu mẫu.

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

Tôi đoán không có cách HTML5 tiêu chuẩn để làm điều này, nhưng nếu bạn không phiền khi sử dụng thư viện jQuery, tôi đã có thể đạt được xác thực "nhóm hộp kiểm" bằng cách sử dụng webshims '" tính năng xác thực " yêu cầu nhóm :

Các tài liệu cho nhóm yêu cầu nói:

Nếu một hộp kiểm có lớp 'bắt buộc theo nhóm' thì ít nhất một trong các hộp kiểm có cùng tên trong biểu mẫu / tài liệu phải được kiểm tra.

Và đây là một ví dụ về cách bạn sẽ sử dụng nó:

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

Tôi chủ yếu sử dụng webshims để polyfill các tính năng HTML5, nhưng nó cũng có một số tiện ích mở rộng tùy chọn tuyệt vời như cái này.

Nó thậm chí cho phép bạn viết các quy tắc hợp lệ tùy chỉnh của riêng bạn. Ví dụ: tôi cần tạo một nhóm hộp kiểm không dựa trên tên của đầu vào, vì vậy tôi đã viết quy tắc hợp lệ của riêng mình cho ...

HTML5 không hỗ trợ trực tiếp chỉ yêu cầu một / ít nhất một hộp kiểm tra trong một nhóm hộp kiểm. Đây là giải pháp của tôi bằng 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;
                }
            }
        }

Các javascript sẽ đảm bảo ít nhất một hộp kiểm tra được chọn, sau đó hủy yêu cầu toàn bộ nhóm hộp kiểm. Nếu một hộp kiểm tra được kiểm tra trở thành không được kiểm tra, thì nó sẽ yêu cầu tất cả các hộp kiểm lại!

Tôi đã có cùng một vấn đề và tôi giải pháp của tôi là:

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/

Lấy cảm hứng từ các câu trả lời từ @thegauraw và @Brian Woodward, đây là một chút tôi đã kết hợp với người dùng JQuery, bao gồm thông báo lỗi xác thực tùy chỉnh:

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

Lưu ý rằng biểu mẫu của tôi có một số hộp kiểm được kiểm tra theo mặc định.

Có lẽ một số thuật sĩ JavaScript / JQuery của bạn có thể thắt chặt điều đó hơn nữa?

chúng ta cũng có thể làm điều này dễ dàng với html5, chỉ cần thêm một số mã jquery

Bản giới thiệu

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

Tôi đã thêm một đài phát thanh vô hình vào một nhóm các hộp kiểm. Khi có ít nhất một tùy chọn được chọn, radio cũng được đặt để kiểm tra. Khi tất cả các tùy chọn bị hủy, radio cũng được đặt thành hủy. Do đó, biểu mẫu sử dụng lời nhắc radio "Vui lòng kiểm tra ít nhất một tùy chọn"

• Bạn không thể sử dụng display: none vì radio không thể được tập trung.
• Tôi làm cho kích thước radio bằng với toàn bộ kích thước hộp kiểm, để nó rõ ràng hơn khi được nhắc.

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/

Xin chào, chỉ cần sử dụng hộp văn bản bổ sung cho nhóm hộp kiểm. Khi nhấp vào bất kỳ hộp kiểm nào, hãy đặt các giá trị vào hộp văn bản đó. Làm cho hộp văn bản đó được yêu cầu và chỉ đọc.

Tôi nhận ra có rất nhiều giải pháp ở đây, nhưng tôi thấy không có giải pháp nào đạt được mọi yêu cầu tôi có:

• Không yêu cầu mã hóa tùy chỉnh
• Mã hoạt động khi tải trang
• Không có lớp tùy chỉnh cần thiết (hộp kiểm hoặc cha mẹ của họ)
• Tôi cần một số danh sách hộp kiểm để chia sẻ giống nhau nameđể gửi các vấn đề Github thông qua API của họ và đang sử dụng tên label[]để gán nhãn trên nhiều trường biểu mẫu (hai danh sách hộp kiểm và một vài lựa chọn và hộp văn bản) - được cho là tôi có thể đạt được điều này mà không cần chia sẻ cùng tên, nhưng tôi quyết định dùng thử, và nó đã hoạt động.

Yêu cầu duy nhất cho cái này là jQuery. Bạn có thể kết hợp điều này với giải pháp tuyệt vời của @ ewall để thêm thông báo lỗi xác thực tùy chỉnh.

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

Đây là một mẹo đơn giản khác sử dụng 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");
    }
});

Đó là tất cả .. điều này hoạt động vì nếu không có hộp kiểm nào được chọn, không có gì liên quan đến nhóm hộp kiểm (bao gồm tên của nó) được đăng lên máy chủ

Thử:

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

hoặc là

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

Cụ thể hơn:

Khi bạn đang đọc dữ liệu từ mảng hộp kiểm, hãy đảm bảo mảng có:

len>0 

Trong trường hợp này:

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