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

Question

I would like to place one error label (Not All) in a custom location. jQuery provides this http://docs.jquery.com/Plugins/Validation/validate#toptions optio

Answer 1

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

Answer 2

Actually its not necessary to use any javascript code for this, and I discovered a simple solution. 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!

Answer 3

I found that if you have more than two labels for custom errors in diferent locations, there can be a crazy position error if you does nor make a single return on each if for errorPlacement, in this sample I have two checkboxes, error label, one checkbox, one label

HTML Code

<p><label for="owner"><input  type="checkbox" name="option[]" id="owner" value="1"  validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input  type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>

Script

<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>

Answer 4

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