Question

我想验证我的所有3个MultiSelect复选框在包含它们的表单之前至少有一个值是使用jQuery Validation插件（https://jqueryvalidation.org/）提交的我的复选框也使用了“多选”插件。一旦第三个多选菜单发生变化，表单必须提交。

HTML

<form id="numberOrderForm"  method="post" enctype='multipart/form-data' action="localNumberResults" name="numberform">
    <div class="wrappers" id="multi-select1Wrapper">
        <h2>Area Code</h2>
        <select class="dropDownMenus" id="multi-select1" class="multiselect" name="multi_select1[]" multiple="multiple" required>
            <?php
                //getting values from a database and putting each into their own <option> element
            ?>
        </select>
    </div>       

   <div class="wrappers" id="multi-select2Wrapper">
        <h2>Number Type</h2>
        <select class="dropDownMenus multiselect" id="multi-select2" name="multi_select2[]" multiple="multiple" required> 
            <option class="menuoption2" name="package" value="1">Gold</option>
            <option class="menuoption2" name="package" value="2">Silver</option>
            <option class="menuoption2" name="package" value="3">Bronze</option>
        </select>
    </div>

    <div class="wrappers" id="multi-select3Wrapper">
        <h2>Order</h2>
        <select class="dropDownMenus multiselect" id="multi-select3" name="multi_select3[]" required onchange="this.form.submit()"> 
            <option class="menuoption3" name="order" value="ASC">Sequential(ASC)</option>
            <option class="menuoption3" name="order" value="DESC">Sequential(DESC)</option>
            <option class="menuoption3" name="order" value="random">Random</option>
        </select>
    </div>  
</form>

JS

 var $form = $("#numberOrderForm");
var validator = $form.data('validator');
validator.settings.ignore = ':hidden:not(".multiselect")';

$form.validate({
    rules: {
            multi_select1: "required",
            multi_select2: "required",
            multi_select3: "required"
        }

    var $form = $("#numberOrderForm");
    var validator = $form.data('validator');
    validator.settings.ignore = ':hidden:not(".multiselect")'; 
    //These three lines above was suggested as a solution upon
    //the 'Known Issues' section of the plugins docs here:   
    //https://github.com/davidstutz/bootstrap-multiselect/issues/347   
    //But it makes no difference here

    highlight: function(element) {
        $(element).closest('.wrappers').addClass('has-error');
    },

    unhighlight: function(element) {
        $(element).closest('.wrappers').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block small',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            element.closest('.form-group').append(error);
        }
    },
    submitHandler: function() {
        alert('valid form');
    return false;
}

然而，即使在这3个复选框菜单中没有选中任何复选框，也没有进行验证并且表单仍然提交，有人能告诉我哪里出错了吗？如果有任何帮助，它非常接近我所追求的：http://jsfiddle.net/5a3Labtp/6/

使用jQuery插件进行表单验证“验证”和“多选”无效

0 个答案: