Я работаю с плагином Проверки jQuery, и я написал следующий код, который добавляет класс к элементу (<input>
) родитель (<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>
Это работает отлично, однако, если содержание поля исправлено и становится допустимым, класс, очевидно, не становится удаленным из своего родителя (на самом деле, ни один не делает ошибочный элемент, вместо этого это просто получает a display: none;
Свойство CSS). Как я могу проверить, становится ли элемент допустимым, и удалите его родительский класс раз так?
Любая справка значительно ценилась бы!
Отредактированный: Добавленный больше информации.
После более серьезных копаний я нашел ответ прямо у себя под носом, но, к сожалению для меня, хорошо спрятанный. Плагин имеет встроенную функцию выделения (сюрприз, сюрприз). Обычно он выделяет / снимает выделение элемента, но его можно легко преобразовать для работы с родительским элементом:
$("#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");
}
});
Надеюсь, это кому-то поможет!