jquery - 复选框不会验证

Question

我有一个要在客户端验证的表单，并且我正在使用 jQuery Validate 来完成该任务。验证适用于其他（输入）字段，但不适用于复选框。

我究竟做错了什么？

<form name="insert_new_lesson" id="insert_new_lesson" method="post" action="" class="lesson-form" enctype="multipart/form-data" novalidate="novalidate">
    <input class="{category: true}" type="checkbox" name="category[]" value="15" id="grade15">
    ... rest of the fields...


$("#insert_new_lesson").validate({
    errorPlacement: function (error, element) { 
        error.insertBefore(element);    
    },
    rules: {
        category: {
            required: 'input[type="checkbox"]:checked',
        },
        ...rest of the fields (validation works)

Answer 1

这是 jQuery Validator 的当前问题。在官方存储库中查看此问题。

如其中一条评论所述，您必须执行以下操作才能验证具有相同名称的字段：

$.validator.prototype.elements = function() {
    var validator = this;
    // select all valid inputs inside the form (no submit or reset buttons)
    return $(this.currentForm)
        .find(":input")
        .not(":submit, :reset, :image, [disabled]")
        .not( this.settings.ignore )
        .filter(function() {
            !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
            return validator.objectLength($(this).rules());
        });
};

请注意，我已经从 GitHub 的评论中修改了代码。用户 dsand1234 used find("input")，应该find(":input")在第 5 行。

Answer 2

试试这个：

$.validator.addMethod('atLeastOne', function(value, element, param) {
    return $('input[name^="category"]').is(':checked');
}, 'Please select at least one checkbox');

$(function() {
    $("#insert_new_lesson").validate({rules: {
            'category[]': 'atLeastOne'
        }, groups: {
            checkboxes: 'category[]'
        }, errorPlacement: function(error, elem) {
            if (elem.attr('name').match(/category\[\]/)) {
                $('input[name^="category"]:last').next().after(error);
            }
            else {
                elem.next().after(error);
            }
        }
    });
});

Answer 3

你能试试这个json的语法吗（单引号外，双引号）：

class='{"category": true}'

Answer 4

这对我有用，是一个简单的解决方案。只需在规则中用引号将“名称”括起来。

rules: {
    'category[]': {
        required: true
    }
}

我在这里的另一篇文章中找到了这个解决方案。