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

Question

我能够使用 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 验证中似乎忽略了隐藏元素。我尝试应用该解决方案，但由于选择有不同的方法，我陷入困境(选择中不存在多选)

这里有任何 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,
    });
});

Answer 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