62

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!

chainwork
  • 2,890
  • 4
  • 30
  • 29

4 Answers4

90

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);
}
chainwork
  • 2,890
  • 4
  • 30
  • 29
  • 1
    Why did you pick `error.appendTo( element.parent("td").next("td") )` as the location, when it's really arbitrary? I realize you're answering your own question, but without the original code to provide the actual context, your answer may confuse future readers. I provided a more generic answer that matches the generic-ness of the original question. Also, typically one waits a while before answering their own question to give others ample opportunity to respond. You did nothing wrong here, but a variety of answers makes for higher quality at SO. – Sparky Nov 02 '12 at 18:21
  • Agreed Sparky, I was excited to find the answer. Grabbed it from docs.jquery.com without noticing their example is confusing. I will go back and update it to be more clear. Thanks! – chainwork Nov 02 '12 at 18:23
  • 1
    Include a demo by using the [Validate Plugin's CDN link](http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js) inside a [jsFiddle](http://jsfiddle.net) and watch your question bring in up-votes for a long time to come. – Sparky Nov 02 '12 at 18:31
  • 2
    Hi, I was successful to place all errors in one place, but it comes in a single line. How to break errors into new lines? please help – hima Sep 13 '13 at 08:30
  • Hello Hima, Can you please share your code.Because i am getting same issue. – Naren Verma Dec 22 '16 at 12:29
60

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!

Abdurrahman I.
  • 703
  • 10
  • 13
  • 5
    Great solution! No need to mess with jQuery for something so simple. – KyleMit Sep 08 '15 at 13:50
  • 2
    Do you know if the `generated` attribute was necessary? It seemed to work OK for me without the attribute using jQuery Validate 1.11.1. – Sam Feb 21 '17 at 00:53
  • Hi @Sam, actually didn't check that attribute was necessary or not. And i think so either. You could be right. – Abdurrahman I. Apr 07 '17 at 07:30
  • 2
    Note that this only seems to work if the `for` attribute is set to the input's `name` rather than its `id`. – Sam Apr 20 '18 at 03:39
  • A much simpler approach to me than the currently accepted answer, thanks! – FoxDeploy Dec 03 '18 at 18:21
  • One of my favourite thumb ups. It is the time you think that you can develop everything. Update code in a minute, but the solution was much easier... Thanks mate – JohnnyJaxs Oct 30 '20 at 03:30
18

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

KoalaBear
  • 2,755
  • 2
  • 25
  • 29
Sparky
  • 98,165
  • 25
  • 199
  • 285
1

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>
XMedia Software
  • 387
  • 3
  • 5