JQuery 验证 - 字段不会取消突出显示

Question

我有一个非常基本的表单，其中包含 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;}

Answer 1

这就是我目前正在解决的方法。我仍然觉得这是一个黑客，但在我找到一个好的解决方案之前，我一直坚持这个。

1. 为所有需要被视为组的控件添加了自定义类。

2. 期间unhighlight，从用此自定义类装饰的所有元素中删除错误类。另外，删除label错误消息的元素。

    unhighlight: function (input) {

            $(input).removeClass("error");

            if (isNameEmpty()) {

              $(".custom-class").removeClass("error");

              $(".custom-class").siblings("label").remove();

            }

        }

注意：该溶液需要谨慎使用。此处仅根据一个条件删除错误，因为这是我的控件需要的唯一验证。但是，如果单个控件（例如最小值、最大值等）与 一起进行多个验证required，则使用此代码将消除所有错误。