title: jQuery Validation error class affects Select element
body: <p>When a validation error occurs on a <code>&lt;select&gt;</code> form element after pressing the submit button, the <code>errorClass</code> appears to be applied to the <code>&lt;select&gt;</code> element which is not what I want. <code>errorClass</code> should only be applied to the error message.</p>
  
  <p><strong>Question:</strong> How can we avoid that problem?</p>
  
  <p><strong>jsFiddle</strong>: <a href="http://jsfiddle.net/ufTn8/" rel="nofollow noreferrer">http://jsfiddle.net/ufTn8/</a></p>
  
  <p><img src="https://i.stack.imgur.com/FGIPN.png" alt="enter image description here"></p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p><strong>jsfiddle</strong>: <a href="http://jsfiddle.net/SPK3D" rel="nofollow noreferrer">http://jsfiddle.net/SPK3D</a></p>
  
  <p>If you take a look at updated code, when the error occurs, the class <code>alert</code> is not applied to the error element until u click on the error element... this strange behavior is seen in both Chrome and Firefox.</p>
  
  <p>Somehow <code>$(element).siblings('label.error').addClass('alert');</code> did not add the <code>alert</code> class initially...</p>