复杂形式的 Jquery 验证复选框(至少一个用于组)

Question

我有一个非常复杂的表单，其中包含 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>

我需要使用至少要求组/块复选框的规则来验证表单。 我尝试：

$(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;
}
});

但是当没有选中复选框时，我也得到了"有效表格"。

P.S：块的数量由用户在以前的表单中选择，那么我可以有 1、2、3 或更多块的复选框。

Answer 1

你的代码...

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()方法和"开头为"(^=、 选择器(动态声明规则。

不要在.validate()内声明规则...

$(document).ready(function () {
$("#myform-s3").validate({
rules: {
// other fields maybe
....

将.rules()方法与.each()和required_from_group规则一起使用。 请注意，required_from_group是additional-methods.js文件的一部分。

$('[name^="member[1]"]').each(function() {
$(this).rules('add', {
require_from_group: [1, $('[id^="package-1"]')]
});
});

其中1是组所需的最小数量，$('[id^="package-1"]')针对组的所有成员。

演示 2：jsfiddle.net/1an60fxy/2/

使用此版本，您将获得重复的消息，您必须使用groups选项处理这些消息。 由于表单是复杂且动态的，因此在调用.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/