使用jQuery插件进行表单验证'；验证'；和'；多选'；不起作用

在使用jQuery验证插件（）提交包含多个复选框的表单之前，我想验证所有3个复选框是否至少有一个值 我的复选框也使用了“多选”插件。 一旦第三个多选菜单更改，表单必须提交

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>

但是，没有进行验证，即使在这3个复选框菜单中没有选中任何复选框，表单仍会提交，有人能告诉我哪里出错了吗？

---

如果有任何帮助的话，这与我想要的非常接近：

请只向我们展示一个演示您的问题的JSFIDLE。您的

.validate（）

方法缺少右括号<代码>}）

 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;
}