Question

I have a situation like this:

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>Text</label>
  <input type="text" id="name">
</div>

using the jQuery validation library (using all the defaults for validating), the email "error" label will be generated like this:

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>ERROR:|</label>
  <label>Text</label>
  <input type="text" id="name">
</div>

but my goal is to get it like this:

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>Text</label>
  <input type="text" id="name">
  <label>ERROR:|</label>
</div>

How do I do this?

jQuery validation library

Edit: The issue I’m running into with simply appending the label from the invalidHandler event is that the label is not generated until after the invalidHandler event.

Answer 1

There is an errorPlacement function in the validation library.

$('.inputForm').validate({
   ... settings ....
   errorPlacement: function(error, element) {
      error.appendTo(element.parent());
   },
   ... other settings ...
});