如何使用 jquery validate 和 Chosen 验证多选？答案

【问题标题】：How to validate multi select with jquery validate and Chosen?如何使用 jquery validate 和 Chosen 验证多选？
【发布时间】：2012-12-23 19:58:49
【问题描述】：

我能够使用 jquery-validate 验证多选，并创建了一个 fiddle 作为演示。按住 Ctrl 取消选择选择并单击选择以查看效果。

<form id="myform">
    <select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple">
    <option value="1">Hotel 3 Star</option>
    <option selected="selected" value="2">Hotel 4 Star</option>
    </select>
</form>

$(document).ready(function() {
    var validator = $('#myform').validate({
          // options
          rules: {
            "deals-1-sales_item": "required",            
        },

        //ignore: ':hidden:not("#id_deals-1-sales_item")'                                      
    });
});

但一旦我选择了多选，它就会停止工作：请参阅fiddle。

$('#id_deals-1-sales_item').chosen();

在研究时，我发现有人选择了 tried this 和 jquery multiselect 而不是选中的。 jquery validate 中似乎忽略了隐藏元素。我尝试应用该解决方案，但由于选择有不同的方法，我被卡住了（选择中不存在多选）

这里有任何 jQuery 大师可以为我指明正确的方向吗？此外，我宁愿基于类而不是基于字段名称的解决方案。像这样：

这是我中途想出的解决方案。但不知道如何处理???。

$.validator.addMethod("needsSelection", function(value, element) {
        return $(element).???.length > 0;
    });

var validator = $('#myform').validate({
});

$('#myform').find('select.multi_select_mandatory').each(function(){
        $(this).change(function(){
            $(this).valid();
        });
        $(this).rules('add', {
            needsSelection: ""
        });
    });

解决方案：

使用下面的 eicto 解决方案，我能够创建基于类而不是基于字段名称的解决方案。当您有想要立即验证而不向服务器提交任何内容的动态元素时，这特别有用。

    var validator = $('#deal_modal_form').validate({
        // options
        ignore: ':hidden:not(.chzn-done)'
     });

    $('#myform').find('select.multi_select_mandatory').each(function(){
    $(this).chosen().change(function(){
        $(this).valid();
    });
    $(this).rules('add', {
        required: true,
    });
});

【问题讨论】：

这篇文章解释了问题stackoverflow.com/questions/11232310/…
还可以看看这个在其 API 中有验证的插件：ivaynberg.github.com/select2
谢谢查理。关于第一条评论，建议的解决方案已提交。不过我马上需要它。让我看看那个插件。也许这有帮助......
我检查了调试器，问题是change 在select 实际更新之前触发......更糟糕的是......它没有更新选择......
@charlietfl 这个插件看起来很简洁，但是你在哪里看到最小选择验证？

标签： jquery jquery-validate jquery-chosen

【解决方案1】：

这对我有用：

$(document).ready(function() {
    var validator = $('#myform').validate({
        // options
        rules: {
            "deals-1-sales_item": "required",
        },

        ignore: ':hidden:not(.chzn-done)'
    });
    var checkerrors = function() {
        validator.form();
    };
    var chosen = $('#id_deals-1-sales_item').chosen().change(checkerrors);
});

这个想法是在每次更改时手动检查表单。

DEMO

【讨论】：

我想知道.checkForm() 和.valid() 之间的区别。我没有找到checkForm 的任何文档。
valid, checkForm 不确定使用 checkForm 是否是个好主意，但它确实是不同的方法，valid 不检查表单数据本身，而 checkForm 可以
我并不是说一种方法比另一种更好，因为我不熟悉checkForm()。但是，valid() 返回关于表单是否通过验证的布尔值 true/false。如果它不检查表单数据本身，它怎么能做到这一点？它还会触发任何适用的错误消息，几乎就像没有提交的submit。
@Sparky .valid 在这种情况下不起作用，因为它不会调用检查
.form 也可以，但它比.checkForm 做得更多，所以我不确定在这里使用它是否正确

【解决方案2】：

我在@eicto 和@kave 解决方案的帮助下编写了我的解决方案，如下所示：

 $.validator.addMethod("multiSelectRequired", function (value, element) {
    return element.length > 0;
});
$("#aspnetForm").find('select.multi_select_mandatory').each(function () {
    $(this).change(function () {
        $(this).valid();
    });

    $(this).rules('add', {
        'multiSelectRequired': true
    });
});

在初始化插件时，我添加了 `ignoe:[] 以便不忽略验证中的隐藏输入。

我正在为我的引导项目使用名为 bootstrap-multiselect 的特殊插件来呈现复选框选择 - https://github.com/davidstutz/bootstrap-multiselcet

【讨论】：