title: Form Validation with jQuery plugins 'Validate' and 'Multi-Select' not working
body: <p>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 (<a href="https://jqueryvalidation.org/" rel="nofollow noreferrer">https://jqueryvalidation.org/</a>)
  My checkboxes are also using the 'Multi-Select' plugin however too.
  The form has to submit once the third multi-select menu has changed.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form id="numberOrderForm"  method="post" enctype='multipart/form-data' action="localNumberResults" name="numberform"&gt;
      &lt;div class="wrappers" id="multi-select1Wrapper"&gt;
          &lt;h2&gt;Area Code&lt;/h2&gt;
          &lt;select class="dropDownMenus" id="multi-select1" class="multiselect" name="multi_select1[]" multiple="multiple" required&gt;
              &lt;?php
                  //getting values from a database and putting each into their own &lt;option&gt; element
              ?&gt;
          &lt;/select&gt;
      &lt;/div&gt;       
  
     &lt;div class="wrappers" id="multi-select2Wrapper"&gt;
          &lt;h2&gt;Number Type&lt;/h2&gt;
          &lt;select class="dropDownMenus multiselect" id="multi-select2" name="multi_select2[]" multiple="multiple" required&gt; 
              &lt;option class="menuoption2" name="package" value="1"&gt;Gold&lt;/option&gt;
              &lt;option class="menuoption2" name="package" value="2"&gt;Silver&lt;/option&gt;
              &lt;option class="menuoption2" name="package" value="3"&gt;Bronze&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="wrappers" id="multi-select3Wrapper"&gt;
          &lt;h2&gt;Order&lt;/h2&gt;
          &lt;select class="dropDownMenus multiselect" id="multi-select3" name="multi_select3[]" required onchange="this.form.submit()"&gt; 
              &lt;option class="menuoption3" name="order" value="ASC"&gt;Sequential(ASC)&lt;/option&gt;
              &lt;option class="menuoption3" name="order" value="DESC"&gt;Sequential(DESC)&lt;/option&gt;
              &lt;option class="menuoption3" name="order" value="random"&gt;Random&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code> 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;
  }
  </code></pre>
  
  <p>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: <a href="http://jsfiddle.net/5a3Labtp/6/" rel="nofollow noreferrer">http://jsfiddle.net/5a3Labtp/6/</a></p>