Question

我正在尝试将新规则应用到我当前的jQuery验证中，该验证将检查我的每个组是否至少选中了一个复选框。

我的困难在于我无法更改复选框名称。

这是我目前的jQuery：

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
    $('#docContainer').validate({ // initialize the plugin
        rules: {
            EMAIL: {
                required: true,
                email: true
            },
            FNAME: {
                required: true
            },
            POSTCODE: {
                digits: true,
                minlength: 4
            },
            mark1: {
                required: function(elem)
                {
                    if ($('input[name="group[20349][1]"]:checked').length > 0 ||
                        $('input[name="group[20349][2]"]:checked').length > 0 ||
                        $('input[name="group[20349][3]"]:checked').length > 0)
                    {
                        return true;
                    }
                    return false;
                }
            },
            mark2: {
                required: function(elem)
                {
                    if ($('input[name="group[20353][1]"]:checked').length > 0 ||
                        $('input[name="group[20353][2]"]:checked').length > 0 ||
                        $('input[name="group[20353][3]"]:checked').length > 0)
                    {
                        return true;
                    }
                    return false;
                }
            },
            mark3: { 
                required: function(elem)
                {
                    if ($('input[name="group[20357][1]"]:checked').length > 0 ||
                        $('input[name="group[20357][2]"]:checked').length > 0 ||
                        $('input[name="group[20357][3]"]:checked').length > 0)
                    {
                        return true;
                    }
                    return false;
                }
            }
        },
        messages: {
            FNAME: "<b style='color:#FFFFFF'>Please fill your first name...</b>",
            EMAIL: {
                required: "<b style='color:#FFFFFF'>We need your email address to contact you!</b>",
                email: "<b style='color:#FFFFFF'>Your email address must be in the format of name@domain.com</b>"
            },
            POSTCODE: {
                digits: "<b style='color:#FFFFFF'>Post Code must be numbers only...</b>",
                minlength: "<b style='color:#FFFFFF'>Post Code must be at least 4 digits...</b>"
            },
            mark1: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Type Of Property...</b>",
            mark2: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Bedrooms...</b>",
            mark3: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Price Range...</b>"
        }
    });
});  
</script>

mark1，mark2，mark3是适合作为每个群组规则的已创建字段，正如您在内部所见，我的复选框每个都有唯一的名称，我无法更改这一点。

第1组mark1由group[20349][1]，group[20349][2]，group[20349][3]组成第2组mark2由group[20353][1]，group[20353][2]，group[20353][3]组成第3组mark3由group[20357][1]，group[20357][2]，group[20357][3]

组成

我的问题是该规则不起作用，它触发姓名，电子邮件，但是当没有为每个组检查时，不会触发复选框。

我该如何解决这个问题？

Answer 1

默认情况下，jQuery Validate插件会自动确保选中组中的至少一个复选框。您只需将required规则应用于该组。

<强>的jQuery ：

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            checkboxGroup1: {
                required: true
            }
        },
        messages: {
            checkboxGroup1: {
                required: "you must check at least one from Group 1"
            }
        }
    });

});

<强> HTML ：

<form id="myform">
    <input type="checkbox" name="checkboxGroup1" /><br/>
    <input type="checkbox" name="checkboxGroup1" /><br/>
    <input type="checkbox" name="checkboxGroup1" /><br/>
    <br/>
    <input type="submit" />
</form>

DEMO ：http://jsfiddle.net/42PrP/

Answer 2

通过为每个组创建一个新属性，我可以在用户尝试提交表单时解决它：

添加的属性为data-foo="anynameyouwantforyourgroup"

$('#docContainer').submit(function() {
    if ($('[data-foo=property]:checked').size() == 0)
    {
        alert('You must CHECK at least 1 option for group X');
        return false;
    }

    if ($('[data-foo=bedrooms]:checked').size() == 0) {
        alert('You must CHECK at least 1 option for group Y');
        return false;
    }

    if ($('[data-foo=price]:checked').size() == 0) {
        alert('You must CHECK at least 1 option for group Z');
        return false;
    }
    return true;
});

每组至少有一个复选框？

2 个答案: