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

Solution 1:

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);
}

Solution 2:

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!

Solution 3:

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