jquery验证至少检查一个复选框

Question

我有这样的事情：

<form>
<input name='roles' type='checkbox' value='1' />
<input name='roles' type='checkbox' value='2' />
<input name='roles' type='checkbox' value='3' />
<input name='roles' type='checkbox' value='4' />
<input name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
<form>

我想验证至少应该检查一个复选框（角色），是否可以使用 jquery.validate ？

Answer 1

示例来自 https://github.com/ffmike/jquery-validate

 <label for="spam_email">
     <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" /> Spam via E-Mail </label>
 <label for="spam_phone">
     <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> Spam via Phone </label>
 <label for="spam_mail">
     <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" /> Spam via Mail </label>
 <label for="spam[]" class="error">Please select at least two types of spam.</label>

仅使用 javascript 在标签中没有字段“验证”时相同：

$("#testform").validate({ 
    rules: { 
            "spam[]": { 
                    required: true, 
                    minlength: 1 
            } 
    }, 
    messages: { 
            "spam[]": "Please select at least two types of spam."
    } 
}); 

如果您需要不同的输入名称，则可以使用如下所示的内容：

<input type="hidden" name="spam" id="spam"/>
<label for="spam_phone">
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam_phone" /> Spam via Phone</label>
<label for="spam_mail">
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam_mail" /> Spam via Mail </label>

Javascript：

 $("#testform").validate({ 
    rules: { 
        spam: { 
            required: function (element) {
                var boxes = $('.checkbox');
                if (boxes.filter(':checked').length == 0) {
                    return true;
                }
                return false;
            },
            minlength: 1 
        } 
    }, 
    messages: { 
            spam: "Please select at least two types of spam."
    } 
}); 

我在输入之前添加了隐藏输入，如果没有选择，则将其设置为“必需”复选框

Answer 2

验证插件只会验证当前/焦点元素。因此，您需要向验证器添加自定义规则以验证所有复选框。与上面的答案类似。

$.validator.addMethod("roles", function(value, elem, param) {
   return $(".roles:checkbox:checked").length > 0;
},"You must select at least one!");

而在元素上：

<input class='{roles: true}' name='roles' type='checkbox' value='1' />

此外，您可能会发现错误消息的显示还不够充分。
仅突出显示 1 个复选框并仅显示 1 条消息。如果您单击另一个单独的复选框，然后该复选框返回第二个复选框的有效值，则原始复选框仍被标记为无效，并且尽管表单有效，但仍会显示错误消息。
在这种情况下，我总是自行显示和隐藏错误。然后验证器只负责不提交表单。

您的另一个选择是编写一个函数，该函数将在单击复选框时将隐藏输入的值更改为“有效”，然后将验证规则附加到隐藏元素。虽然这只会在 onSubmit 事件中验证，但会在适当的时间显示和隐藏消息。这些是您可以与验证插件一起使用的唯一选项。

希望有帮助！

Answer 3

嗯，首先你的 id 属性必须是唯一的，你的代码很可能是

<form>
<input class='roles' name='roles' type='checkbox' value='1' />
<input class='roles' name='roles' type='checkbox' value='2' />
<input class='roles' name='roles' type='checkbox' value='3' />
<input class='roles' name='roles' type='checkbox' value='4' />
<input class='roles' name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
</form>

对于你的问题：

if($('.roles:checkbox:checked').length == 0)
  // no checkbox checked, do something...
else
  // at least one checkbox checked...

但是，请记住 JavaScript 表单验证只是指示性的，所有验证都必须在服务器端完成。

Answer 4

$("#idform").validate({
    rules: {            
        'roles': {
            required: true,
        },
    },
    messages: {            
        'roles': {
            required: "One Option please",
        },
    }
});

Answer 5

这就是我过去处理这个问题的方法：

$().ready(function() {                                                      
    $("#contact").validate({
        submitHandler: function(form) {
            // see if selectone is even being used
            var boxes = $('.selectone:checkbox');
            if(boxes.length > 0) {
                if( $('.selectone:checkbox:checked').length < 1) {
                    alert('Please select at least one checkbox');
                    boxes[0].focus();
                    return false;
                }
            }
            form.submit();
        }
    }); 

});

Answer 6

sir_neanderthal 已经发布了一个很好的答案。

我只是想指出，如果您想为输入使用不同的名称，您也可以使用（或只是复制方法）require_from_group 方法 来自官方 jQuery 验证additional-methods.js (链接到版本 1.13.1 的 CDN）。

Answer 7

您很可能希望在复选框旁边有一个文本。在这种情况下，您可以将复选框放在标签内，如下所示：

<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="72" aria-required="true" class="error"> All Over</label>
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="73" aria-required="true" class="error"> All Over X2</label>

问题是，当显示错误消息时，它将被插入到复选框之后、文本之前，从而使其不可读。为了解决这个问题，我更改了错误放置函数：

if (element.is(":checkbox")) {
    error.insertAfter(element.parent().parent());
}
else {
    error.insertAfter(element);
}

这取决于您的布局，但我所做的是为复选框控件设置特殊的错误放置。我得到了复选框的父级，这是一个标签，然后我得到了它的父级，在我的例子中是一个 div。这样，错误就会被放置在复选框控件列表的下方。

Answer 8

确保规则集中的 input-name[] 使用引号。我花了几个小时才弄清楚那部分。

$('#testform').validate({
  rules : {
    "name[]": { required: true, minlength: 1 }
  }
});

在这里阅读更多...
http://docs.jquery.com/Plugins/Valid...ets .2C_dots.29

Answer 9

 if ($('input:checkbox').filter(':checked').length < 1){
        alert("Check at least one!");
 return false;
 }