jQuery Validation插件:在元素的错误容器中添加/删除类

Question

我正在使用jQuery Validation插件,我编写了以下代码,如果无效,则在元素的(<input>)parent(<label>)中添加一个类,并在之前插入实际的error元素(<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");
    }
});

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