title: How to validate multi select with jquery validate and Chosen?
body: <p>I am able to validate a multi-select with jquery-validate and have created a <a href="http://jsfiddle.net/houmie/8rn89/3/" rel="nofollow noreferrer">fiddle</a> as demo.
  Unselect the selection by holding Ctrl and click on the selection to see the effect.</p>
  
  <pre><code>&lt;form id="myform"&gt;
      &lt;select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple"&gt;
      &lt;option value="1"&gt;Hotel 3 Star&lt;/option&gt;
      &lt;option selected="selected" value="2"&gt;Hotel 4 Star&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  
  $(document).ready(function() {
      var validator = $('#myform').validate({
            // options
            rules: {
              "deals-1-sales_item": "required",            
          },
  
          //ignore: ':hidden:not("#id_deals-1-sales_item")'                                      
      });
  });
  </code></pre>
  
  <p>But as soon as I chosenify the multi select it stops working: See <a href="http://jsfiddle.net/houmie/vwHMT/1/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <pre><code>$('#id_deals-1-sales_item').chosen();
  </code></pre>
  
  <p>While researching I found that someone has <a href="https://stackoverflow.com/questions/10225928/validating-multiselect-with-jquery-validation-plugin">tried this</a> with <code>jquery multiselect</code> instead of chosen. It seems hidden elements are ignored in jquery validate. I tried to apply that solution but since Chosen has different methods, I got stuck (multiselect doesn't exist in chosen)</p>
  
  <p>Is here any jQuery guru that could point me to the right direction? Besides I would rather have the solution based on classes rather than based on field names. Like this:</p>
  
  <p>This is a solution I came up with half way through. But don't know how to proceed with <code>???</code>.</p>
  
  <pre><code>$.validator.addMethod("needsSelection", function(value, element) {
          return $(element).???.length &gt; 0;
      });
  
  var validator = $('#myform').validate({
  });
  
  $('#myform').find('select.multi_select_mandatory').each(function(){
          $(this).change(function(){
              $(this).valid();
          });
          $(this).rules('add', {
              needsSelection: ""
          });
      });
  </code></pre>
  
  <p><strong>Solution:</strong></p>
  
  <p>With eicto's solution below, I was able to create a class based instead of field name based solution. This is specially useful when you have dynamic elements that you want to validate instantly without submitting anything to the server.</p>
  
  <pre><code>    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,
      });
  });
  </code></pre>