Jquery 验证复杂表单中的复选框(组至少一个)
Jquery Validate checkbox (at least one for group) in a complex form
我有一个非常复杂的表单,其中包含 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>
我需要使用至少需要 group/block 复选框的规则来验证表单。
我尝试:
$(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;
}
});
但是当没有选中复选框时我也得到 "Valid Form"。
P.S:
块数由用户在以前的表单中选择,然后我可以有 1、2、3 或更多块复选框。
您的代码...
rules: {
'member[1]': { // <- MUST be the NAME of input element
member[1]
不是任何东西的 name
,所以什么都不会发生。您不能在此处使用部分名称或选择器,只能使用 name
属性的实际值。
解决方案 1
要验证一组复选框,您需要它们共享相同的 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>
然后您可以简单地单独使用 required
规则...
$(document).ready(function () {
$("#myform-s3").validate({
rules: {
'member[1]': {
required: true
}, ....
演示 1:https://jsfiddle.net/1an60fxy/
解决方案 2
如果您无法更改命名,则必须使用 .rules()
方法和 "starts with"、^=
选择器动态声明规则。
不要在 .validate()
...
内声明规则
$(document).ready(function () {
$("#myform-s3").validate({
rules: {
// other fields maybe
....
将 .rules()
方法与 .each()
和 required_from_group
规则结合使用。请注意,required_from_group
是 the additional-methods.js
file 的一部分。
$('[name^="member[1]"]').each(function() {
$(this).rules('add', {
require_from_group: [1, $('[id^="package-1"]')]
});
});
其中 1
是群组所需的最少人数,$('[id^="package-1"]')
是群组的所有成员。
使用此版本,您会收到必须使用 the groups
option. Since your form is complex and dynamic, you will need to construct this option dynamically before you call .validate()
. 处理的重复消息。
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
},
....
演示 2b:jsfiddle.net/1an60fxy/3/
我有一个非常复杂的表单,其中包含 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>
我需要使用至少需要 group/block 复选框的规则来验证表单。 我尝试:
$(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;
}
});
但是当没有选中复选框时我也得到 "Valid Form"。
P.S: 块数由用户在以前的表单中选择,然后我可以有 1、2、3 或更多块复选框。
您的代码...
rules: {
'member[1]': { // <- MUST be the NAME of input element
member[1]
不是任何东西的 name
,所以什么都不会发生。您不能在此处使用部分名称或选择器,只能使用 name
属性的实际值。
解决方案 1
要验证一组复选框,您需要它们共享相同的 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>
然后您可以简单地单独使用 required
规则...
$(document).ready(function () {
$("#myform-s3").validate({
rules: {
'member[1]': {
required: true
}, ....
演示 1:https://jsfiddle.net/1an60fxy/
解决方案 2
如果您无法更改命名,则必须使用 .rules()
方法和 "starts with"、^=
选择器动态声明规则。
不要在 .validate()
...
$(document).ready(function () {
$("#myform-s3").validate({
rules: {
// other fields maybe
....
将 .rules()
方法与 .each()
和 required_from_group
规则结合使用。请注意,required_from_group
是 the additional-methods.js
file 的一部分。
$('[name^="member[1]"]').each(function() {
$(this).rules('add', {
require_from_group: [1, $('[id^="package-1"]')]
});
});
其中 1
是群组所需的最少人数,$('[id^="package-1"]')
是群组的所有成员。
使用此版本,您会收到必须使用 the groups
option. Since your form is complex and dynamic, you will need to construct this option dynamically before you call .validate()
.
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
},
....
演示 2b:jsfiddle.net/1an60fxy/3/