首页 文章

对一组复选框使用HTML5“required”属性？

提问于
浏览 次
132

使用支持HTML5的新浏览器时（例如FireFox 4）;
表单字段的属性为 required='required' ;
表格字段为空/空白;
然后点击提交按钮;
浏览器检测到"required"字段为空并且不提交表单;
而是浏览器显示一个提示，要求用户在该字段中键入文本 .

现在，我有一组复选框，而不是单个文本字段，其中至少有一个复选框应由用户检查/选择 .

如何在此组复选框上使用HTML5 required 属性？ （由于只需要检查其中一个复选框，我不能在每个复选框上放置 required 属性）

PS . 我正在使用simple_form，如果这很重要的话 .

UPDATE

HTML 5 multiple attribute在这里有用吗？有没有人用它来做类似我问题的事情？

更新

It appears that this feature is not supported by the HTML5 spec: ISSUE-111: What does input.@required mean for @type = checkbox?

（问题状态：问题已标记为无偏见 . ）和here is the explanation .

更新2

这是一个老问题，但是想澄清一下，问题的初衷是能够在不使用Javascript的情况下完成上述操作 - 即使用HTML5方式 . 回想起来，我应该让“没有Javascript”更加明显 .

forms html5 validation checkbox

9 回答

  • 11

    我有同样的问题，我的解决方案是这样的：

    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/

    回复于
  • 2

    不幸的是，HTML5并没有提供开箱即用的方法 .

    但是，使用jQuery，您可以轻松控制复选框组是否至少包含一个checked元素 .

    考虑以下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 . 基于此，您可以实施验证检查 .

    回复于
  • 12

    这是一个简单的技巧 . 这是jQuery代码，如果选中任何一个属性，可以通过更改 required 属性来利用html5验证 . 以下是您的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脚本，如果选择了任何一个脚本，它将禁用进一步的验证检查 . 使用name元素选择 .

    $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
});
    回复于
  • 1

    我想's no standard HTML5 way to do this, but if you don' tt介意使用jQuery库，我已经能够使用webshims'“group-required”验证功能实现"checkbox group"验证：

    docs for group-required说：

    如果复选框具有“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" />

    我主要使用webshims来填充HTML5功能，但它也有一些像这样的可选扩展 .

    它甚至允许您编写自己的自定义有效性规则 . 例如，我需要创建一个名为't based on the input'的复选框组，所以我写了my own validity rule for that ...

    回复于
  • 3

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

    javascript将确保至少选中一个复选框，然后取消整个复选框组 . 如果选中的一个复选框变为未选中状态，则它将再次需要所有复选框！

    回复于
  • 5

    受到@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向导可以进一步收紧它们？

    回复于
  • 58

    我们也可以使用html5轻松完成，只需要添加一些jquery代码

    Demo

    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');
        }
    });
});
    回复于
  • 0

    嗨，只需使用复选框组附加的文本框 . 当单击任何复选框时，将值放入该文本框 . 使该文本框成为必需和只读 .

    回复于
  • -1

    这是使用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");
    }
});

    这就是全部..这是有效的，因为如果没有选中任何复选框，则关于复选框组（包括其名称）的任何内容都不会发布到服务器

    回复于

相关问题