Custom Error Label Placement using jQuery validate (For all or some of your errors)

So if you want all your jQuery Validate error messages to appear in one place you would use http://docs.jquery.com/Plugins/Validation/validate#toptions (Find errorPlacement) option on that page.

I noticed some answers on here answer one but not both options.

1) That being said if you want custom placement for all of your errors you can do this:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

2) If you want to specify specific locations for one or multiple error labels you can do this.

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}

Actually its not necessary to use any javascript code and I discovered a simple solution for this. You can force jQuery Validate to place the validation error in a DOM element.

For example, jQuery generates an error like this:

 <label for="firstname" generated="true" class="error">This field required.</label>

You can place this label DOM element in your next td block or li element or whatever you want as a blank like this.

<label for="firstname" generated="true" class="error"></label>

jQuery will find that blank field and place the error message for you.

Just don't forget the for field in label element!

This is a more generic solution, not specific to the OP's HTML structure.

If you only want one particular error label in a different location while the rest remain in their default placement, try this...

$("#myform").validate({
  errorPlacement: function(error, element) {
     if (element.attr("name") == "myFieldName") {

       // do whatever you need to place label where you want

         // an example
         error.insertBefore( $("#someOtherPlace") );

         // just another example
         $("#yetAnotherPlace").html( error );  

     } else {

         // the default error placement for the rest
         error.insertAfter(element);

     }
   }
});

Online Documentation for errorPlacement: option