Question

I’m using jqTransform to style my forms which works very well.
However, when I add Bassistance’s Validation plugin, the validation error messages are shown within the jqTransformwrapper divs (i.e. inside the textbox) instead of the parent element (after input).

So the DOM shows this:

<label for="firstname">Firstname</label>
<div class="jqTransformInputWrapper">
   <div class="jqTransformInputInner">
      <div><input class="required jqtranformdone jqTransformInput error" name="firstname" id="firstname">
      <label for="firstname" generated="true" class="error">This field is required.</label>
      </div>
   </div>

Whereas it should be:

<label for="firstname">Firstname</label>
<div class="jqTransformInputWrapper">
   <div class="jqTransformInputInner">
      <div>
         <input class="required jqtranformdone jqTransformInput error" name="firstname" id="firstname">
      </div>
   </div>
</div>
<label for="firstname" generated="true" class="error">This field is required.</label>
</div>

Is there any way I can get the plugin to insert the error label 3 parent’s higher?

I notice on Bassistance’s example page they use a different form styling plugin and dont have this problem, but I cant figure out how they did it.
http://jquery.bassistance.de/validate/demo/themerollered.html

Answer 1

As a workaround I set the row div to relative positioning and the error message to absolute so that it is relative to the div.

#myForm label.error {
   color:#dd0000;
   position:absolute;
   float:none;
   font-style:italic;
   left:350px;
   top:4px;
}

This way the error appears alongside each input instead of inside it 🙂