Javascript jquery 验证检查至少一个复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3035634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery validate check at least one checkbox
提问by Omu
I have something like this:
我有这样的事情：
<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>
I would like to validate that at least one checkbox (roles) should be checked, is it possible with jquery.validate ?
我想验证至少应该选中一个复选框（角色），是否可以使用 jquery.validate ？
采纳答案by menzies
The validate plugin will only validate the current/focused element.Therefore you will need to add a custom rule to the validator to validate all the checkboxes. Similar to the answer above.
验证插件只会验证当前/焦点元素。因此，您需要向验证器添加自定义规则以验证所有复选框。类似于上面的答案。
$.validator.addMethod("roles", function(value, elem, param) {
return $(".roles:checkbox:checked").length > 0;
},"You must select at least one!");
And on the element:
在元素上：
<input class='{roles: true}' name='roles' type='checkbox' value='1' />
In addition, you will likely find the error message display, not quite sufficient. Only 1 checkbox is highlighted and only 1 message displayed. If you click another separate checkbox, which then returns a valid for the second checkbox, the original one is still marked as invalid, and the error message is still displayed, despite the form being valid. I have always resorted to just displaying and hiding the errors myself in this case.The validator then only takes care of not submitting the form.
此外，您可能会发现错误消息显示不够充分。仅突出显示 1 个复选框，仅显示 1 条消息。如果单击另一个单独的复选框，然后该复选框返回第二个复选框的有效值，则原始复选框仍被标记为无效，并且尽管表单有效，但仍会显示错误消息。在这种情况下，我总是自己显示和隐藏错误。然后验证器只负责不提交表单。
The other option you have is to write a function that will change the value of a hidden input to be "valid" on the click of a checkbox and then attach the validation rule to the hidden element. This will only validate in the onSubmit event though, but will display and hide messages at the appropriate times. Those are about the only options that you can use with the validate plugin.
您拥有的另一个选项是编写一个函数，该函数将在单击复选框时将隐藏输入的值更改为“有效”，然后将验证规则附加到隐藏元素。这只会在 onSubmit 事件中验证，但会在适当的时间显示和隐藏消息。这些是您可以与验证插件一起使用的唯一选项。
Hope that helps!
希望有帮助！
回答by sir_neanderthal
Example from https://github.com/ffmike/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>
The same without field "validate" in tags only using javascript:
仅使用 javascript 的标签中没有字段“验证”的相同：
$("#testform").validate({
rules: {
"spam[]": {
required: true,
minlength: 1
}
},
messages: {
"spam[]": "Please select at least two types of spam."
}
});
And if you need different names for inputs, you can use somethig like this:
如果你需要不同的输入名称，你可以使用这样的东西：
<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:
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."
}
});
I have added hidden input before inputs and setting it to "required" if there is no selected checkboxes
如果没有选中的复选框，我在输入之前添加了隐藏输入并将其设置为“必需”
回答by Romain Deveaud
Mmm first your id attributes must be unique, your code is likely to be
嗯，首先你的 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>
For your problem :
对于您的问题：
if($('.roles:checkbox:checked').length == 0)
// no checkbox checked, do something...
else
// at least one checkbox checked...
BUT, remember that a JavaScript form validation is only indicative, all validations MUST be done server-side.
但是，请记住 JavaScript 表单验证只是指示性的，所有验证都必须在服务器端完成。
回答by Barno
$("#idform").validate({
rules: {
'roles': {
required: true,
},
},
messages: {
'roles': {
required: "One Option please",
},
}
});
回答by Kenrick Buchanan
This is how I have dealt with it in the past:
这是我过去处理它的方式：
$().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();
}
});
});
回答by Francisco Goldenstein
It's highly probable that you want to have a text next to the checkbox. In that case, you can put the checkbox inside a label like I do below:
您很可能希望在复选框旁边有一个文本。在这种情况下，您可以将复选框放入标签中，如下所示：
<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>
The problem is that when the error message is displayed, it's going to be inserted after the checkbox but before the text, making it unreadable. In order to fix that, I changed the error placement function:
问题是当显示错误消息时，它会被插入在复选框之后但在文本之前，使其不可读。为了解决这个问题，我更改了错误放置功能：
if (element.is(":checkbox")) {
error.insertAfter(element.parent().parent());
}
else {
error.insertAfter(element);
}
It depends on your layout but what I did is to have a special error placement for checkbox controls. I get the parent of the checkbox, which is a label, and then I get the parent of it, which is a div in my case. This way, the error is placed below the list of checkbox controls.
这取决于您的布局，但我所做的是为复选框控件设置一个特殊的错误位置。我得到复选框的父级，它是一个标签，然后我得到它的父级，在我的情况下是一个 div。这样，错误就位于复选框控件列表下方。
回答by betatester07
sir_neanderthalhas already posted a nice answer.
sir_neanderthal已经发布了一个很好的答案。
I just want to point out that if you would like to use different names for your inputs you can also use (or just copy the method) require_from_group methodfrom official jQuery Validation additional-methods.js(link to CDN for version 1.13.1).
我只想指出，如果你想为你的输入使用不同的名称，你也可以使用（或只是复制方法）来自官方 jQuery Validation additional-methods.js 的require_from_group 方法（链接到版本 1.13.1 的 CDN） .
回答by user2060616
make sure the input-name[]is in inverted commas in the ruleset. Took me hours to figure that part out.
确保input-name[]在规则集中用引号括起来。我花了几个小时才弄清楚那部分。
$('#testform').validate({
rules : {
"name[]": { required: true, minlength: 1 }
}
});
read more here... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29
在这里阅读更多... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29
