jQuery 验证 - 选择至少 1 的多维数组

我如何使用 jQuery Validation 验证以下内容。用户必须至少选择以下选项之一。

<select name="quantity[adult][seat_a]" class="group-required">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<select name="quantity[adult][seat_b]" class="group-required">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<select name="quantity[adult][seat_c]" class="group-required">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

要求至少其中一项select选择元素，您将使用the require_from_group method http://jqueryvalidation.org/require_from_group-method/这是一部分the additional-methods.js file http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js.

$('#myform').validate({
    // other options,
    rules: {
        "quantity[adult][seat_a]": {
            require_from_group: [1, ".group-required"]
        },
        "quantity[adult][seat_b]": {
            require_from_group: [1, ".group-required"]
        },
        "quantity[adult][seat_c]": {
            require_from_group: [1, ".group-required"]
        }
    },
    groups: {
        myGroup: "quantity[adult][seat_a] quantity[adult][seat_b] quantity[adult][seat_c]"   
    }
});

这将在所有三个上创建同时且相同的错误消息select元素。使用the groups option http://jqueryvalidation.org/validate/#groups将它们合二为一the errorPlacement option http://jqueryvalidation.org/validate/#errorplacement将生成的消息放入您的布局中。

重要的: 你还需要value默认的option每一个的select为空。否则，插件会认为0是用户的选择，不会验证任何内容。

<select name="quantity[adult][seat_a]" class="group-required">
    <option value="">0</option>
    ....

OR...

<select name="quantity[adult][seat_a]" class="group-required">
    <option value="">Please select...</option>
    <option value="0">0</option>
    ....

EDIT:

如果您有大量元素并且不希望在内部单独声明它们.validate()，然后使用.rules('add')jQuery 中的方法.each().

$('#myform').validate({
    // other options,
});

$('.group-required').each(function() {
    $(this).rules('add', {
        require_from_group: [1, '.group-required']
    });
});

工作演示：http://jsfiddle.net/n1z0Lufw/ http://jsfiddle.net/n1z0Lufw/

此外，使用groups合并错误消息的选项，再次无需手动声明每个字段名称...

var names = "";
$('.group-required').each(function() {
    names += $(this).attr('name') + " ";
});
names = $.trim(names);

$('#myform').validate({
    // other options,
    groups: {
        myGroup: names
    }
});

$('.group-required').each(function () {
    $(this).rules('add', {
        require_from_group: [1, '.group-required']
    });
});

演示2：http://jsfiddle.net/scmuxq53/ http://jsfiddle.net/scmuxq53/