jQuery验证插件：向/从元素的错误容器添加/删除类

Question

我正在使用jQuery Validation插件，编写了以下代码：如果输入无效，则向元素（<input>）的父元素（<label>）添加一个类，并在<br>之前插入实际的错误元素（<span>）。

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属性）。如何检查元素是否有效并在此情况下删除其父类？

非常感谢您的任何帮助！

---

编辑：添加更多信息。

- Valentin Flachsel

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

希望这能帮助到某人!

- Valentin Flachsel

Answer 2

errorElement: 'none' 对我有用。

- chris