Jquery 按 class 名称验证复选框

Question

我想通过jquery验证添加规则和消息来验证复选框。我是这样做的，但有些地方我犯了错误，导致代码无法正常工作。

我希望用户必须 select 在表单提交之前至少勾选一个复选框。

代码

<form id="myform">
    <input type="checkbox" name="test[]" class="clschk" />x
    <input type="checkbox" name="test[]"  class="clschk"/>y
    <input type="checkbox" name="test[]"  class="clschk"/>z
    <input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

js代码

$(document).ready(function () {
    $('#myform').validate({ // initialize the plugin
        rules: {
            '.clschk': {
                required: true,
                maxlength: 2
            }
        },
        messages: {
            '.clschk': {
                required: "You must check at least 1 box",
                maxlength: "Check no more than {0} boxes"
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});

Answer 1

这个问题仅仅是因为 rules 对象的键必须等于元素的 name 属性，而不是它的选择器。试试这个：

$('#myform').validate({ // initialize the plugin
    rules: {
        'test[]': { // note here
            required: true,
            maxlength: 2
        }
    },
    messages: {
        'test[]': { // and here
            required: "You must check at least 1 box",
            maxlength: "Check no more than {0} boxes"
        }
    },
    submitHandler: function(form) {
        alert('valid form submitted');
        return false; // for demo
    }
});

Working example

Answer 2

您可以使用 addClassRules 方法添加基于 class 的验证消息，然后您可以通过以下代码覆盖默认消息

$.validator.addMethod("cRequired",$.validator.methods.required,"You must check at least 1 box");

$(document).ready(function () {
    $.validator.addClassRules({

    clschk:{
        cRequired: true,
        cmaxlength: 2
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }


});

$('#myform').validate();

$.validator.addMethod("cRequired", $.validator.methods.required,"You must check at least 1 box");

$.validator.addMethod("cmaxlength", $.validator.methods.maxlength,"You must check at least 1 box");

});

已更新 fiddle - http://jsfiddle.net/Nbcj9/398/

Jquery 按 class 名称验证复选框

Jquery validate checkbox by class name

jquery

jquery-validate

代码

js代码