Form Validation with jQuery plugins 'Validate' and 'Multi-Select' not working

Question

I want to validate that all 3 of my MultiSelect checkboxes have at least one value before the form they are contained in is submitted using the jQuery Validation plugin (https://jqueryvalidation.org/) My checkboxes are also using the 'Multi-Select' plugin however too. The form has to submit once the third multi-select menu has changed.

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

However no validation takes place and the form still submits even if no checkboxes are checked in any of those 3 checkbox menus, can anyone show me where I am going wrong? If any help, its very close to this what I am after: http://jsfiddle.net/5a3Labtp/6/