CODEWITHSUNDEEP
jqueryjquery-validate
contactmatt
contactmatt

Reputation: 18600

jQuery Validation - How to have error label that is generated appear at end of div

I have a situation like this:

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>Text</label>
  <input type="text" id="name">
</div>

using the jQuery validation library (using all the defaults for validating), the email "error" label will be generated like this:

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>ERROR:|</label>
  <label>Text</label>
  <input type="text" id="name">
</div>

but my goal is to get it like this:

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>Text</label>
  <input type="text" id="name">
  <label>ERROR:|</label>
</div>

How do I do this?

jQuery validation library

Edit: The issue I'm running into with simply appending the label from the invalidHandler event is that the label is not generated until after the invalidHandler event.

Upvotes: 0

Views: 1723

Answers (3)

markle976
markle976

Reputation: 967

jQuery Validation Plugin will always prepend the error label unless you add your own first. So...

<div>
 <label>Text</label>
 <input type="text" id="email">
 <label class="error" style="display:none"></label>

 <label>Text</label>
 <input type="text" id="name">
 <label class="error" style="display:none"></label>
</div>

Be sure to set the class to be the same as the plugin is using and to hide the element by default.

Upvotes: 0

Brian Hoover
Brian Hoover

Reputation: 7991

There is an errorPlacement function in the validation library. 

$('.inputForm').validate({
   ... settings ....
   errorPlacement: function(error, element) {
      error.appendTo(element.parent());
   },
   ... other settings ...
});

Upvotes: 1

user1542652
user1542652

Reputation: 73

just assign an Id to your main Div and then append the Error to that Div. e.g.

$("div#divid").append("error");

Upvotes: 0

Related Questions