jqueryvalidation至less检查一个checkbox
我有这样的东西：
<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> 我想validation至less有一个checkbox（angular色）应该检查，是否有可能与jquery.validate？
validation插件只会validation当前/有焦点的元素。因此，您将需要添加一个自定义规则validation器来validation所有的checkbox。 类似于上面的答案。
$.validator.addMethod("roles", function(value, elem, param) { if($(".roles:checkbox:checked").length > 0){ return true; }else { return false; } },"You must select at least one!");
而在元素上：
<input class='{roles: true}' name='roles' type='checkbox' value='1' />
另外，你可能会发现错误信息显示，不够充分。 只有1个checkbox被突出显示，并且只显示1条消息。 如果您单击另一个单独的checkbox（该checkbox然后返回第二个checkbox的有效位置），则原始的checkbox仍被标记为无效，并且仍然显示错误消息，尽pipe表单有效。 在这种情况下，我总是诉诸于显示和隐藏自己的错误。validation者然后只关心不提交表单。
另一个选项是编写一个函数，将一个隐藏的input的值更改为“有效”，然后将该validation规则附加到隐藏的元素上。 这只会在onSubmit事件中validation，但会在适当的时间显示和隐藏消息。 这些是唯一的选项，你可以使用validation插件。
希望有所帮助！
来自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>
相同的没有字段“validation”标签只使用javascript：
$("#testform").validate({ rules: { "spam[]": { required: true, minlength: 1 } }, messages: { "spam[]": "Please select at least two types of spam." } });
如果你需要input不同的名字，你可以使用这样的命令：
<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." } });
如果没有选中的checkbox，我在input之前添加了隐藏的input，并将其设置为“必需”
嗯，首先你的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表单validation只是指示性的，所有的validation必须在服务器端完成。
$("#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(); } }); });
您希望在checkbox旁边显示文字的可能性很大。 在这种情况下，你可以把checkbox放在一个标签里，就像我在下面做的那样：
<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>
问题是，当显示错误消息时，将在checkbox之后但在文本之前插入，使其不可读。 为了解决这个问题，我改变了错误放置function：
if (element.is(":checkbox")) { error.insertAfter(element.parent().parent()); } else { error.insertAfter(element); }
这取决于你的布局，但我所做的是对checkbox控件有一个特殊的错误位置。 我得到checkbox的父母，这是一个标签，然后我得到它的父母，这是我的情况一个div。 这样，错误将放在checkbox控件的列表下面。
sir_neanderthal已经发布了一个很好的答案。
我只想指出，如果你想为你的input使用不同的名称，你也可以使用官方的jQueryvalidationadditional-methods.js中的 require_from_group方法 （或复制方法） require_from_group方法 （ 链接到版本1.13.1的CDN ） 。
确保input-name[]在规则集中以引号括起来。 花了我几个小时来弄清楚这一部分。
$('#testform').validate({ rules : { "name[]": { required: true, minlength: 1 } } });
在这里阅读更多… http://docs.jquery.com/Plugins/Valid…ets.2C_dots.29
