Problem With errorPlacement in jQuery Validator

Question

I have a question about the errorPlacement Method in jQuery Validator Plug-in: I want to put an Error Message in a div.

Before i continue... Yeah, the code is horrible, i'm working in a project that isn't mine, without documentation or anything that i help me. But i cannot write from zero all the webpage.

Ok, let's continue, this is a little section of the HTML code:

<tr>
  <th height="24" scope="col">
    <div align="left" class="Style69 Style72 Style75">
      <span class="Style77">Name</span>
    </div>
  </th>
  <th height="24" colspan="3" scope="col">
    <div align="left">
      <span class="Style69 Style72 Style75">
        <input id="txtname" name="txtname" class="required"
        type="text" size="30" />
      </span>
    </div>
  </th>
</tr>
<tr>
  <td height="17" colspan="4">
    <div id="errorMessage"></div>
  </td>
</tr>

The Layout is a table, and, inside of this table are placed all the elements (inputboxes and select's).

My question is, how can i place the error message in the div "errorMessage"?

I'm doing something like this:

errorPlacement: function(error, element) {
   error.appendTo(element.prev().next().next());
 }

But it doesn't work. Then, I've Tried This:

errorPlacement: function(error, element) {
   error.appendTo(element.prev().next().next().find("#errorMessage"));
 }

And nothing happens. The "Div" and "Span" tags are part of the DOM?

Any Suggestion?

Does your page contains "errorMessage" div more than once? If your answer is no, maybe just $("#errorMessage").html(error); is enough. — xkcd
– xkcd, Commented Nov 3, 2010 at 13:48
Yes to what anilca said! Element IDs must be unique, so there can only be one element with ID errorMessage on your page. So, all you need to do to select that element is $('#errorMessage'). — Matt Ball
– Matt Ball, Commented Nov 3, 2010 at 14:04
@Matt Ball Thank you So much! To you and anilca. Really It Worked! And yes, i know, all the Div ID's in the webpage are unique. — Alejandro Echeverri
– Alejandro Echeverri, Commented Nov 3, 2010 at 14:10

Nick Craver · Accepted Answer · 2010-11-03 14:07:45Z

3

The problem here is that .prev() gives no results, there's no previous sibling to your <input> here:

  <span class="Style69 Style72 Style75">
    <input id="txtname" name="txtname" class="required"
    type="text" size="30" />
  </span>

Something like this should work:

errorPlacement: function(error, element) {
  element.closest('tr').next().find('.errorMessage').append(error);
}

This uses .closest() to go up to the <tr>, gets the .next() sibling (the next <tr>) then .find() to get the class="errorMessage" element inside.

With this, change your id to a class, like this:

<div class="errorMessage"></div>

answered Nov 3, 2010 at 14:07

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

Alejandro Echeverri Over a year ago

Yes, It Worked Too! Thank you So Much! Your Solution and The anilca's solution worked perfectly. And, My Apologies for this question, I'm really a Begginer. Thank you Guys!

Nick Craver Over a year ago

@Astantler - it's a perfectly valid question, and welcome :)

Collectives™ on Stack Overflow

Problem With errorPlacement in jQuery Validator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related