jQuery validation error message location

Question

I am using jQuery validation plugin to check my inputs, and having troubles of adjusting the location of the error messages. Here is a demo of my code.

I would like to show the error message under the problematic cell, not next to it. I checked the reference and found I should focus on the errorPlacement function. So if I would like to display the error message under the cell, should I create an new <tr> and then insert the error message? Thanks for any suggestions.

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

I can change <table> to <div>, but that requires to change a lot more stuffs... — TTT
– TTT, Commented Mar 8, 2013 at 0:42

Steve · Accepted Answer · 2013-03-08 00:16:24Z

4

The only reason the error message is "next" to the element is because both are inline elements (<select> and <label>). You can move the error message underneath by simply:

1) Targeting the error label with some CSS that gives it a display: block;

or

2) Wrapping the error label in some block element before inserting it (you can use the code you posted above and just wrap the error in a div before appending it)

answered Mar 8, 2013 at 0:16

Steve

8,6487 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TTT Over a year ago

I tried the first approach. It works, but not lined up properly... Is there a way to make sure the size of error message has the same size of examined cell? Thanks!

TTT Over a year ago

I mean the error messages are floating around and change the layout of current format of input cells. But it seems like using white-space: nowrap solves the problems a little bit.

Community · Accepted Answer · 2017-05-23 11:49:19Z

1

Just add the display:block to your CSS. Works for me.

.error{
    border-color: #F78181;
    color:red;
    display:block;
}

To make the label the same width as the select, you can style it with CSS next sibling's nomeclature + like this:

select + label{
    width:300px;
    background: blue;
}

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Mar 8, 2013 at 0:58

tim peterson

24.4k63 gold badges188 silver badges304 bronze badges

1 Comment

TTT Over a year ago

If the error message is too long, then it could not automatically wrap. I think using white-space: nowrap could solve this issue.

Collectives™ on Stack Overflow

jQuery validation error message location

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related