Плагин jQuery Validation: добавить/удалить класс в/из контейнера ошибок элемента
Я работаю с плагином jQuery Validation, и я написал следующий код, который добавляет класс к элементу (<input>
) parent (<label>
), если он не действителен, а также вставляет фактический элемент ошибки (<span>
) до <br>
.
HTML...
<label>
text<br><input>
</label>
... и jQuery.
$("#form_to_validate").validate({
rules: {
...
},
errorElement: "span",
errorPlacement: function(error, element) {
element.parent().addClass('error');
error.insertBefore(element.parent().children("br"));
}
});
Итак, если элемент формы не проверяется, он превращается в:
<label class="error">
text<span>error text</span><br><input>
</label>
Это отлично работает, однако, если содержимое поля будет исправлено и станет действительным, класс, очевидно, не будет удален из его родителя (на самом деле, ни элемент ошибки, а просто получает свойство display: none;
CSS), Как проверить, является ли элемент действительным и удалить его родительский класс, если это так?
Любая помощь будет принята с благодарностью!
Отредактировано: добавлена дополнительная информация.
Ответы
Ответ 1
После некоторых более тяжелых копаний я нашел ответ прямо под моим носом, но, к сожалению, для меня, хорошо скрытый. Плагин имеет встроенную функцию подсветки (сюрприз, сюрприз). Обычно это выделяет/выделяет элемент, но его можно легко преобразовать для работы с родителем элемента:
$("#form_to_validate").validate({
rules: {
...
},
errorElement: "span",
errorPlacement: function(error, element) {
error.insertBefore(element.parent().children("br"));
},
highlight: function(element) {
$(element).parent().addClass("error");
},
unhighlight: function(element) {
$(element).parent().removeClass("error");
}
});
Я надеюсь, что это поможет кому-то!
Ответ 2
errorElement: 'none'
работал у меня.