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>

这很有用，但是，如果字段的内容被更正并变得有效，那么该类显然不会从其父节点中删除（实际上，错误元素也不会被删除，而是只获得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'为我工作。

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

2 个答案: