title: Check validity of select box on change event
body: <p>I'm using the native <code>checkValidity()</code> method on the <a href="https://developer.mozilla.org/en/docs/Web/API/HTMLSelectElement" rel="nofollow"><code>HTMLSelectElement</code></a> and there seems to be  some problems in non-Firefox browsers.</p>
  
  <p><a href="http://jsfiddle.net/RxN6Q/" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <h2>JavaScript</h2>
  
  <pre><code>$(document).on('change', 'select', function () {
      alert(this.checkValidity());
  });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;select required&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option&gt;foo&lt;/option&gt;
      &lt;option&gt;bar&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>In Firefox, the expected results show. In Internet Explorer, it is always valid no matter what option is selected. In Chrome, it checks the validity of the value of the element <strong>before</strong> the change.</p>
  
  <p>Am I doing something wrong or is this just a bug in Blink and Trident, and if so, is there a workaround apart from doing <code>this.value === ''</code>?</p>