Проблема с errorPlacement в jQuery Validator

Question

У меня есть вопрос о методе errorPlacement в плагине jQuery Validator: Я хочу поместить сообщение об ошибке в div.

Прежде чем я продолжу ... Да, код ужасен, я работаю над проектом, который не мой, без документации или чего-то, что мне поможет. Но я не могу написать с нуля всю веб-страницу.

Хорошо, давайте продолжим, это небольшой раздел кода HTML:

<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>

Макет представляет собой таблицу, и внутри этой таблицы размещены все элементы (поля ввода и элементы выбора).

Мой вопрос: как я могу поместить сообщение об ошибке в div "errorMessage"?

Я делаю что-то вроде этого:

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

Но это не работает. Затем я попробовал это:

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

И ничего не происходит. Теги "Div" и "Span" являются частью DOM?

Есть предложения?

Answer 1

Проблема здесь в том, что .prev() не дает результатов, нет предыдущего брата для вашего <input> здесь:

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

Примерно так должно работать:

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

Это использует .closest(), чтобы подняться на <tr>, получает .next() родного брата (следующий <tr>), затем .find() чтобы получить элемент class="errorMessage" внутри.

С этим измените id на класс, например:

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