Использование вложенных оболочек ошибок с плагином jQuery validate

Question

Я использую плагин проверки jQuery . Мои метки ошибок стилизованы как всплывающие подсказки и для создания используют многоуровневые вложенные элементы div. Плагин имеет параметр wrapper , который позволяет указать тип элемента в качестве оболочки для сообщения об ошибке, но он переносится только один раз.

Кто-нибудь знает, как сделать вложенную упаковку?

Это не моя точная разметка, а как пример:

<div class="tooltip">
  <div>
    <div>
      <span class="error">This field is required.</span>
    </div>
  </div>
</div>

* ОБНОВЛЕНИЕ *

Ответ Криса отвечает на мой первоначальный вопрос, но создает новую проблему. Ошибки теперь отображаются по желанию, но плагин не может их очистить. При неудачной проверке span.error устанавливается на display:none, но вложенная оболочка div.tooltip по-прежнему отображается.

Answer 1

Я не знаю, как создать вложенную оболочку с параметром оболочки, но, возможно, вы могли бы использовать обработчик showErrors для достижения того же эффекта.

По сути, вы бы использовали старомодный jquery / javascript, чтобы обернуть элемент span после того, как плагин покажет ошибки. Я думаю, уловка будет выяснена, если вы уже завернули это во всплывающую подсказку. Возможно, вы можете сделать это, найдя ближайший div с классом всплывающей подсказки из span.

Я надеюсь, что появится более элегантное решение, но я думаю, что это хорошее начало. Дайте мне знать, если вы найдете какие-либо настройки, чтобы сделать его более эффективным. У меня не было много времени, чтобы поиграть с этим.

showErrors: function(errorMap, errorList) {

  var errorListSize = errorList.length;
  this.defaultShowErrors();

  if(errorListSize > 0) {
    $('span.error').each(function() {
      if($(this).closest('div.tooltip').size() == 0) {
        $(this).wrap('<div class="tooltip"></div>').wrap('<div></div>').wrap('<div></div>');
      }
    });
  }
},

Вот HTML, который генерируется.

<div class="tooltip">
  <div>
    <div>
      <span class="error">This field is required.</span>
    </div>
  </div>
</div>

Answer 2

У меня была такая же проблема, но так как я не мог исправить это в плагине проверки, я сделал это в css. Хотя я не вижу, как выглядит окно с подсказкой, это может быть вашим решением.

Я установил высоту окна всплывающей подсказки равным 0. Поэтому, когда в нем ничего не было, вы не сможете его увидеть.

Я дал классу ошибки высоту всплывающей подсказки. поэтому, когда ошибка будет добавлена ​​во всплывающую подсказку, она отобразится. Когда элемент ошибки был удален из всплывающей подсказки, он больше не показывался, потому что он больше не наследовал высоту, поскольку элемент ошибки внутри пропал.

Может быть, это решение работает и для вас.

Answer 3

То, как вы делаете, достойно. Другой вариант - иметь ваш ярлык существующим и скрытым. Плагин проверки будет искать метку с class = "error" и for = "элемент должен помечаться как недействительный" и будет показывать ее, если найден, а не создавать новую метку. конечно, если вы хотите, чтобы ваша всплывающая подсказка также отображалась в том же коде, вы должны сделать это в выделенном и не выделенном виде.

Answer 4

Я закончил (это работает), добавив пользовательское событие unhighlight к функции unhighlight плагина:

unhighlight: function(element, errorClass, validClass ) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element).trigger("unhighlight");
}

В своем коде я прикрепил прослушиватели событий к полям формы, которые удаляют все всплывающие подсказки об ошибках, находящиеся в том же родительском контейнере, что и сами поля.