Bassistance验证无法与jqTransform一起正常使用

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 (ie 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

Look for this in your call to the validate function:

errorPlacement: function(error, element) {
                    if ( element.is(":text") )
                        error.appendTo( element.parent().parent().parent().parent() );
                    else
                        error.appendTo( element.parent().next() );
                }

notice the .parent() sequence. you can target different areas like this. its called the jquery selector. other options incl: .children() .next() .prev()

Please note that I have specified text input as the origin. by using this many parent() selectors, you are able to escape the jqtransform wrapping divs and reach the outside world.

play with combinations to place the label exactly where you want!

Answer 2

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 :)