Using jQuery Validation plugin with Uniform

Using jQuery Validation plugin with Uniform

I'm using Uniform  to change the look of selects in a form. I'm also using jQuery Validation to validate the form.


The problem is that Uniform updates the HTML like this:


  1. <div class="selector" id="uniform-state">
  2.       <span>Please choose</span>
  3.       <select name="state" id="state" required="" aria-required="true" class="required">
  4.             <option value="">Please choose</option>
  5.       </select>
  6. </div>
When submitting the form, the validation plugin correctly assigns an error class to the select and inserts a label but because the select is hidden behind the span and because the .selector has a fixed height and overflow:hidden, there's no visual feedback.

I could remove the overflow:hidden from .selector but that would still leave the select wrapper in the normal state, i.e. no red border.

Ideally I need to assign the error class to .selector and have the error label inserted after .selector, not inside it, which is what's happening at the moment.