CODEWITHSUNDEEP
jqueryjquery-validatevalidation
chainwork
chainwork

Reputation: 2886

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

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 option but I could not find anything about how to place one specific error message and not change the default location of all the rest?

Be sure to check all the answers below. There are multiple solutions to this. Thanks all!

Upvotes: 62

Views: 96873

Answers (4)

Abdurrahman I.
Abdurrahman I.

Reputation: 723

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!

Upvotes: 62

Sparky
Sparky

Reputation: 98738

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

Upvotes: 18

XMedia Software
XMedia Software

Reputation: 387

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>

Upvotes: 1

chainwork
chainwork

Reputation: 2886

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

Upvotes: 90

Related Questions