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>

我需要使用至少需要 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 或更多块复选框。

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() 方法和 "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"]') 是群组的所有成员。

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

使用此版本，您会收到必须使用 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/

Jquery 验证复杂表单中的复选框（组至少一个）

Jquery Validate checkbox (at least one for group) in a complex form

jquery

jquery-validate

解决方案 1

解决方案 2