JQuery 验证 - 字段不会取消突出显示
我有一个非常基本的表单，其中包含 Jquery 验证。
要求：如果姓名字段不为空，则需要地址，否则不需要。
这工作正常，唯一的问题是红色突出显示永远不会消失，即使字段变得有效。
重现：
添加一些文本
First Name，然后点击Save按钮。预期结果：所有必填字段将突出显示并带有错误文本。
从中删除文本
First Name，然后点击Save按钮预期结果：突出显示和错误文本应该消失。 实际结果：错误文本消失，但突出显示不会消失。
这个问题有解决办法吗？
$(document).ready(function() {
isNullOrWhitespace = function(input) {
return !input || !input.trim();
};
isNameEmpty = function() {
var name = $("#FirstName").val() + $("#LastName").val();
return isNullOrWhitespace(name);
};
$("#application").validate({
rules: {
FirstName: {
required: function() {
return !isNameEmpty();
}
},
LastName: {
required: function() {
return !isNameEmpty();
}
},
Address1: {
required: function() {
return !isNameEmpty();
}
},
City: {
required: function() {
return !isNameEmpty();
}
},
Zip: {
required: function() {
return !isNameEmpty();
}
},
SomeOtherField: {
required: true
},
},
highlight: function(input) {
$(input).addClass("error");
},
unhighlight: function(input) {
$(input).removeClass("error");
},
submitHandler: function(form) {
alert("Submitted");
}
});
});
label.error {
color: #dc3545 !important;
}
input.error {
border: 1px solid #dc3545 !important;
}
input.input-validation-error {
border: 1px solid #dc3545 !important;
}
select.input-validation-error {
border: 1px solid #dc3545 !important;
}
慕工程01019071回答
-
开满天机
这就是我目前正在解决的方法。我仍然觉得这是一个黑客，但在我找到一个好的解决方案之前，我一直坚持这个。为所有需要被视为组的控件添加了自定义类。期间unhighlight，从用此自定义类装饰的所有元素中删除错误类。另外，删除label错误消息的元素。 unhighlight: function (input) { $(input).removeClass("error"); if (isNameEmpty()) { $(".custom-class").removeClass("error"); $(".custom-class").siblings("label").remove(); } }注意：该溶液需要谨慎使用。此处仅根据一个条件删除错误，因为这是我的控件需要的唯一验证。但是，如果单个控件（例如最小值、最大值等）与 一起进行多个验证required，则使用此代码将消除所有错误。
随时随地看视频慕课网APP
相关分类
JavaScript