jQuery 验证插件 : add/remove class to/from element's error container

Question

我正在使用 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>

这非常有效，但是，如果字段的内容被更正并变得有效，该类显然不会从其父级中删除(实际上，错误元素也不会删除，而只是获得 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");
    }
});

我希望这会对某人有所帮助!