Плагин проверки jQuery: добавление / удаление класса в / из контейнера ошибок элемента

Question

Я работаю с плагином jQuery Validation и написал следующий код, который добавляет класс к родительскому элементу (<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>

Это прекрасно работает, однако, если содержимое поля исправлено и становится действительным, класс, очевидно, не удаляется из своего родителя (на самом деле, и не делает элемент error, вместо этого он просто получает display: none; свойство CSS) , Как я могу проверить, становится ли элемент допустимым, и удалить его родительский класс, если так?

Любая помощь будет принята с благодарностью!

---

Отредактировано: добавлено больше информации.

Answer 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");
    }
});

Надеюсь, это кому-нибудь поможет!

Answer 2

errorElement: 'none' работал для меня.