title: Bootstrap select Plugin Not work With jQuery Validation
body: <p>I design my <code>HTML</code> selectbox using <a href="http://silviomoreto.github.io/bootstrap-select/" rel="nofollow noreferrer">bootstrap select plugin</a>. Now, i add <a href="http://jqueryvalidation.org" rel="nofollow noreferrer">jQueryvalidation</a> Plugin for <code>validate</code> my form But, Validation form not work with bootstrap select plugin.</p>
  
  <p>DEMO <a href="http://jsfiddle.net/8FkA4/" rel="nofollow noreferrer">HERE</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="myform"&gt;
      &lt;select name="year" class="selectpicker"&gt;
          &lt;option value=""&gt;Year&lt;/option&gt;
          &lt;option value="1"&gt;1955&lt;/option&gt;
          &lt;option value="2"&gt;1956&lt;/option&gt;
      &lt;/select&gt;
      &lt;br/&gt;
      &lt;input type="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
  $('select').selectpicker();
      $('#myform').validate({ // initialize the plugin
          rules: {
              year: {
                  required: true,
              }
          },
          submitHandler: function (form) { // for demo
              alert('valid form submitted'); // for demo
              return false; // for demo
          }
      });
  
  });
  </code></pre>
  
  <p><strong>NOTE:</strong> <code>For check this conflict, remove Line 2 from JS, jQuery Validation Worked.</code></p>
  
  <p><strong>EDIT:</strong> <a href="https://stackoverflow.com/users/965051/adeneo">adeneo</a> Fix Problem Using <code>ignore[]</code> method : <a href="http://jsfiddle.net/8FkA4/7/" rel="nofollow noreferrer">FIDDLE</a></p>
  
  <pre><code>$('#myform').validate({ // initialize the plugin
      ignore: [],
      rules: {
          year: {
              required: true
          }
      },
      errorPlacement: function(error, element) {
          if (element.attr("name") == "year") {
            error.insertAfter(".bootstrap-select");
          } else {
            error.insertAfter(element);
          }
      },
      submitHandler: function (form) { // for demo
          alert('valid form submitted'); // for demo
          return false; // for demo
      }
  });
  </code></pre>
  
  <p>Now This Worked but I have New Problem: In normal Validation after select fields, error message <code>This field is required</code> auto Hide( OR with add any css, show success message) but Now, error message is show after fix required field. in act: when we choose years, error message not hide.</p>
  
  <p>How do fix This?</p>