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 `` to `
`, but that requires to change a lot more stuffs... — TTT, Mar 08 '13 at 00:42

score 4 · Accepted Answer · answered Mar 08 '13 at 00:16

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 08 '13 at 00:16

Steve

8,609
6
40
54

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 Mar 08 '13 at 00:50
1

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. – TTT Mar 08 '13 at 01:01

score 1 · Answer 2 · edited May 23 '17 at 11:49

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 '17 at 11:49

Community

1
1

answered Mar 08 '13 at 00:58

tim peterson

23,653
59
177
299

If the error message is too long, then it could not automatically wrap. I think using `white-space: nowrap` could solve this issue. – TTT Mar 08 '13 at 01:02

jQuery validation error message location

2 Answers2