如何为多选框实现 jQuery 验证规则？答案

【问题标题】：how to Implement jQuery Validation rule for multiselect box?如何为多选框实现 jQuery 验证规则？
【发布时间】：2017-06-08 11:28:44
【问题描述】：

这是我的 html 选择框（选项将通过 ajax 调用），带有多选功能和验证

<select id="chapterId" name="chapter[]" class="multiselect-ui form-control" multiple="multiple"></select>

$('#chapterId').multiselect({
        includeSelectAllOption: true
    });

var $validator = $("#orderPaper").validate({
            rules: {
                 'chapter[]': {required: true, min: 1},
            },
            messages: {
                'chapter[]': {required: "Please select chapter"},
            }
});

multiselect.js 也被正确包含。每次选择或不选择“请选择章节”天气章节时都会显示错误。我还检查了是否正确选择了章节，我还可以获得选定的章节 ID。但每次都显示 jquery 错误。

【问题讨论】：

你在 jquery 验证器定义中尝试过 chapter 而不是 chapter[]
是的，@fxlacroix 但之后它不会验证章节字段。
也许你可以查看 jquery 的 validate() 演示页面，但我看到他们直接在标签输入中使用属性... 2 美分 ;) jqueryvalidation.org/files/demo/radio-checkbox-select-demo.html
所以看起来您正在使用插件来更改多选元素的外观。如果是这种情况，那么原始的select 将被隐藏并且不会被验证。您将不得不花时间构建一个更好、更完整的演示，包括足够的 HTML 来重现该问题。请修复您问题中的代码并包含一个 jsFiddle 演示。
经过一些测试，我发现它只有 ajax 加载选项有问题。

标签： javascript jquery-validate multi-select

【解决方案1】：

您只需要使用自定义验证规则。试试这个。

var $validator = $("#orderPaper").validate({
    rules: {
        'chapter[]': {required: true, needsSelection: true},
    },
    messages: {
        'chapter[]': {required: "Please select chapter", needsSelection: "Please select chapter"},
    }
});
$.validator.addMethod("needsSelection", function (value, element) {
    var count = $(element).find('option:selected').length;
    return count > 0;
});

【讨论】：

哦，是的，谢谢@Virendra Jadeja。它对我有用:)。