[英]Jquery Validate checkbox (at least one for group) in a complex form
I've a very complex form with X groups of checkboxes like this: 我有一个非常复杂的表单,其中包含X组复选框:
<div class="checkbox-block1">
<input id="package-1-1" name="member[1][package][19]" type="checkbox" class="checkbox" value="100" style="float: left;">
<input id="package-1-2" name="member[1][package][234]" type="checkbox" class="checkbox" value="300" style="float: left;">
<input id="package-1-3" name="member[1][package][254]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>
<div class="checkbox-block2">
<input id="package-2-1" name="member[2][package][19]" type="checkbox" class="checkbox" value="100" style="float: left;">
<input id="package-2-2" name="member[2][package][234]" type="checkbox" class="checkbox" value="300" style="float: left;">
<input id="package-2-3" name="member[2][package][254]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>
I need to validate the form with a rules that require at least on checkbox for group/block. 我需要使用至少在组/块复选框上要求的规则来验证表单。 I try with:
我尝试:
$(document).ready(function () {
$("#myform-s3").validate({
rules: {
'member[1]': {
required: true,
minlength: 1
},
'member[2]': {
required: true,
minlength: 1
},
'member[3]': {
required: true,
minlength: 1
}
},
errorPlacement: function(error, element) {
if ( element.is(':radio') || element.is(':checkbox') ) {
error.insertBefore( element.next() );
} else {
error.insertAfter( element );
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
But I got "Valid Form" also when no checkbox is selected. 但是,当未选中任何复选框时,我也会收到“有效表格”。
PS: Number of blocks are selected by the user in a previous form, then I can have 1, 2, 3 or more blocks of checkboxes. PS:用户以以前的形式选择了块数,那么我可以有1、2、3或更多的复选框。
Your code... 您的代码...
rules: {
'member[1]': { // <- MUST be the NAME of input element
member[1]
is not the name
of anything so nothing is going to happen. member[1]
不是任何东西的name
,因此什么也不会发生。 You cannot use partial names or selectors here, just the actual value of the name
attribute. 您不能在此处使用部分名称或选择器,只能使用
name
属性的实际值。
To validate a group of checkboxes, you need them all to share the same name
... 要验证一组复选框,您需要它们全部共享相同的
name
...
<div class="checkbox-block1">
<input id="package-1-1" name="member[1]" type="checkbox" class="checkbox" value="100" style="float: left;">
<input id="package-1-2" name="member[1]" type="checkbox" class="checkbox" value="300" style="float: left;">
<input id="package-1-3" name="member[1]" type="checkbox" class="checkbox" value="500" style="float: left;">
</div>
And then you can simply use the required
rule all by itself... 然后,您可以简单地单独使用
required
规则...
$(document).ready(function () {
$("#myform-s3").validate({
rules: {
'member[1]': {
required: true
}, ....
DEMO 1: https://jsfiddle.net/1an60fxy/ 演示1: https : //jsfiddle.net/1an60fxy/
If you cannot alter the naming, then you must dynamically declare the rules using the .rules()
method and a "starts with", ^=
, selector. 如果您不能更改命名,则必须使用
.rules()
方法动态声明规则,并使用“起始于”选择符^=
。
Do not declare the rules within .validate()
... 不要在
.validate()
声明规则...
$(document).ready(function () {
$("#myform-s3").validate({
rules: {
// other fields maybe
....
Use the .rules()
method with an .each()
and the required_from_group
rule. 将
.rules()
方法与.each()
和required_from_group
规则一起使用。 Note, required_from_group
is part of the additional-methods.js
file . 注意,
required_from_group
是additional-methods.js
文件的一部分 。
$('[name^="member[1]"]').each(function() {
$(this).rules('add', {
require_from_group: [1, $('[id^="package-1"]')]
});
});
Where 1
is the minimum number required from the group and $('[id^="package-1"]')
targets all members of the group. 其中
1
是组中所需的最小数目, $('[id^="package-1"]')
以组中的所有成员为目标。
DEMO 2: jsfiddle.net/1an60fxy/2/ 演示2: jsfiddle.net/1an60fxy/2/
With this version, you get duplicated messages that you will have to handle with the groups
option . 在此版本中,您会收到重复的邮件,必须使用
groups
选项来处理。 Since your form is complex and dynamic, you will need to construct this option dynamically before you call .validate()
. 由于表单是复杂且动态的,因此您需要在调用
.validate()
之前动态构造此选项。 Here is an example . 这是一个例子 。
var names1 = ""; // create empty string
$('[id^="package-1"]').each(function() { // grab each input starting w/ the class
names1 += $(this).attr('name') + " "; // append each name + single space to string
});
names1 = $.trim(names1); // remove the empty space from the end
$("#myform-s3").validate({
groups: {
myGroup: names1 // reference the string
},
....
DEMO 2b: jsfiddle.net/1an60fxy/3/ 演示2b: jsfiddle.net/1an60fxy/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.