-1

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

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

这是我当前的 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]、、、 第 3 组又由：group[20353][2]、、、group[20353][3]mark3group[20357][1]group[20357][2]group[20357][3]

我的问题是该规则不起作用，它会触发姓名、电子邮件，但不会触发复选框，因为每个组都没有选中任何复选框。

我怎样才能解决这个问题 ？

4

2 回答 2

0

默认情况下，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>

演示：http: //jsfiddle.net/42PrP/

于 2013-07-26T16:11:05.037 回答
-1

通过为我的每个组创建一个新属性，当用户尝试提交表单时，我能够解决它：

添加的属性是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;
});
于 2013-07-26T13:15:45.913 回答