我有这样的事情：
<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 ？
【问题讨论】：
标签： javascript jquery jquery-validate
来自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."
}
});
如果没有选中的复选框，我在输入之前添加了隐藏输入并将其设置为“必需”
【讨论】：
<input type='checkbox' name='group' required minlength='2' ...> 添加验证规则，组的第一个复选框必须包含验证规则。如果您在以下复选框上执行此操作，则不会触发验证。
ignore: $('#spam'),
for 绑定到输入的id，对吧？
验证插件只会验证当前/焦点元素。因此您需要向验证器添加自定义规则以验证所有复选框。类似于上面的答案。
$.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 事件中生效，但会在适当的时候显示和隐藏消息。这些是您可以与 validate 插件一起使用的唯一选项。
希望有帮助！
【讨论】：
name，您就可以简单地使用required 规则。请参阅the real correct answer 和此演示：jsfiddle.net/AsuyC
{roles: true} 对一个类绝对无效...
required 属性和title="Choose a foo" 与输入元素粘贴在一起
首先你的 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 表单验证只是指示性的，所有验证都必须在服务器端完成。
【讨论】：
$("#idform").validate({
rules: {
'roles': {
required: true,
},
},
messages: {
'roles': {
required: "One Option please",
},
}
});
【讨论】：
这就是我过去的处理方式：
$().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();
}
});
});
【讨论】：
sir_neanderthal 已经发布了一个不错的答案。
我只想指出，如果您想为您的输入使用不同的名称，您也可以使用（或只是复制方法）require_from_group method 来自官方 jQuery 验证 additional -methods.js (link to CDN for version 1.13.1)。
【讨论】：
您很可能希望在复选框旁边有一个文本。在这种情况下，您可以将复选框放在标签中，如下所示：
<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。这样，错误就会被放置在复选框控件列表的下方。
【讨论】：
确保input-name[] 在规则集中用引号括起来。我花了几个小时才弄清楚那部分。
$('#testform').validate({
rules : {
"name[]": { required: true, minlength: 1 }
}
});
在这里阅读更多... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29
【讨论】：
name 只是 roles （没有特殊字符），这与这里的任何内容无关。
if ($('input:checkbox').filter(':checked').length < 1){
alert("Check at least one!");
return false;
}
【讨论】：