如何使用jquery验证和选择来验证多选？

Question

我能够使用jquery-validate验证多选,并创建了一个小提琴作为演示.按住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")'                                      
    });
});

但是一旦我选择了多选,它就会停止工作:看小提琴.

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

虽然研究,我发现已经有人尝试这种具有jquery multiselect替代选择.似乎隐藏的元素在jquery validate中被忽略.我尝试应用该解决方案,但由于Chosen有不同的方法,我卡住了(选择中不存在多选)

在这里有任何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

这对我有用：

\n\n

$(document).ready(function() {\n\xc2\xa0 \xc2\xa0\xc2\xa0var validator = $(\'#myform\').validate({\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0// options\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0rules: {\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0"deals-1-sales_item": "required",\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0},\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0ignore: \':hidden:not(.chzn-done)\'\n\xc2\xa0 \xc2\xa0\xc2\xa0});\n\xc2\xa0 \xc2\xa0\xc2\xa0var checkerrors = function() {\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0validator.form();\n\xc2\xa0 \xc2\xa0\xc2\xa0};\n\xc2\xa0 \xc2\xa0\xc2\xa0var chosen = $(\'#id_deals-1-sales_item\').chosen().change(checkerrors);\n});\xe2\x80\x8b\n

\n\n

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

\n\n

演示版

\n