title: jQuery :invalid HTML 5 form with required select element
body: <p>I've been using <code>$('select[required]').is(':invalid')</code> if the browser supports the pattern attribute <code>if(Modernizr.input.pattern) {}</code>, and it works fine in Firefox 4-7, but Chrome and Safari are both having issues.</p>
  
  <p>All other validations work fine, its just required select menus i.e. <code>&lt;select required&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;</code></p>
  
  <p>Here's my jsfiddle: <a href="http://jsfiddle.net/mbCbt/" rel="nofollow">http://jsfiddle.net/mbCbt/</a>. Basically, you select a drop down item, and its meant to validate it.</p>
  
  <p>In firefox, selecting 'test' will say its valid. Selecting 'please select' will says its invalid.</p>
  
  <p>In Safari/Chrome, selecting 'test' will say invalid, then selecting 'please select' will make it it VALID. Selecting test again will make it invalid. From there, select test2 and it will be VALID, then select test again, and it will be valid this time.</p>
  
  <p>I assume its a jQuery thing, because the browser is recognising its valid from the CSS...</p>
  
  <p>Thoughts?  I realise there isn't really any official support for the function (not in the jquery kb), but I'm hoping there's another way around it. I have degraded validation checking for older browsers so maybe I should just drop back to that for webkit?</p>