使用 jQuery Validator 验证至少一个复选框已选中

Question

全部， 在允许用户提交表单之前，我试图确保至少使用 jQuery Validator 检查了我的一个复选框。如果我的复选框有以下代码：

<input type="checkbox" value="23" class="select" name="vendor_categories[]">&nbsp;Test1<br />
<input type="checkbox" value="8" class="select" name="vendor_categories[]">&nbsp;Test2<br />
<input type="checkbox" value="9" class="select" name="vendor_categories[]">&nbsp;Test3<br />
<input type="checkbox" value="2" class="select" name="vendor_categories[]">&nbsp;Test4<br />

那么我有以下 jQuery 代码：

$("#register_vendor").validate({
    ignore: "",
    rules: {
        vendor_email: {
            required: true,
            email: true
        },
        vendor_name: "required",
        zip: {
            required: true,
            digits: true,
            minlength: 5
        }
    },
    messages: {
        vendor_email: {
            required: "<br>Please enter an email address!<br><br>",
            email: "<br>Please enter a valid email address!<br><br>"
        },
        vendor_name: "<br>Please enter your vendor name!<br><br>",
        zip: {
            required: "<br>Please enter a zip code!<br><br>",
            digits: "<br>You can only enter in numbers for the zipcode!<br><br>",
            minlength: "<br>The zip code has to be atleast 5 digits!<br><br>"
        }
    },
    invalidHandler: function(e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field. It has been highlighted below'
                : 'You missed ' + errors + ' fields.  They have been highlighted below';
            alert(message);
        }
        $('.togDesc').show();
    }
});

我如何得到

Answer 1

编写一个自定义验证函数，该函数查看：

if(0 === $('input.select:checked').size()){
    // Error condition
}

...如果结果正确，则引发错误。旁注：使用名为“select”的类输入复选框会令人困惑。

Answer 2

阅读文档后，您似乎可以为“required”属性编写自己的回调处理程序。将其与简单的 select 语句相结合，使其变得非常简单（希望如此）。我无法对此进行测试，但请尝试一下：

$("#register_vendor").validate({
    ignore: "",
    rules: {
        vendor_email: {
            required: true,
            email: true
        },
        vendor_name: "required",
        zip: {
            required: true,
            digits: true,
            minlength: 5
        },
        category_selected: {
            required: function(elem)
            {
                return $("input.select:checked").length > 0;
            }
        }
    },
    messages: {
        vendor_email: {
            required: "<br>Please enter an email address!<br><br>",
            email: "<br>Please enter a valid email address!<br><br>"
        },
        vendor_name: "<br>Please enter your vendor name!<br><br>",
        zip: {
            required: "<br>Please enter a zip code!<br><br>",
            digits: "<br>You can only enter in numbers for the zipcode!<br><br>",
            minlength: "<br>The zip code has to be atleast 5 digits!<br><br>"
        }
    },
    invalidHandler: function(e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field. It has been highlighted below'
                : 'You missed ' + errors + ' fields.  They have been highlighted below';
            alert(message);
        }
        $('.togDesc').show();
    }
});