我正在使用 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 属性)。如何检查元素是否有效并删除其父类(如果有效)?
任何帮助将不胜感激!
<小时/>已编辑:添加了更多信息。
最佳答案
经过一番更深入的挖掘,我发现答案就在我眼皮子底下,但不幸的是,对我来说,答案隐藏得很好。插件内置高亮功能(惊喜,惊喜)。通常它会突出显示/取消突出显示元素,但它可以轻松转换为在元素的父元素上工作:
$("#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");
}
});
我希望这会对某人有所帮助!
关于jQuery 验证插件 : add/remove class to/from element's error container,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2505053/