jQuery Validator中的errorPlacement问题

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?

Answer 1

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>