JQuery 验证 - 字段不会变得不突出

Question

我有一个非常基本的表单，其中包含 Jquery 验证。

要求：如果名称字段不为空，则地址为必填项，否则为空。

这很好用，唯一的问题是红色突出显示永远不会消失，即使字段变得有效。

重现：

向 First Name 添加一些文本，然后点击 Save 按钮。

Expected result: All the required fields will be highlighted with error text.
从 First Name 中删除文本，然后点击 Save 按钮

Expected result: Highlight and error text should go away. Actual result: Error text goes away, but highlight wont.

这个问题有解决办法吗？

  $(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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-reboot.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>


<form id="application">
  <div>
    <input class="form-control name-part" id="FirstName" name="FirstName" placeholder="First" type="text">
  </div>
  <div>
    <input class="form-control name-part" id="LastName" name="LastName" placeholder="Last" type="text" value="">
  </div>
  <div>
    <input class="form-control" id="Address1" name="Address1" placeholder="Address Line 1" type="text" value="">
  </div>
  <div>
    <input class="form-control" id="Address2" name="Address2" placeholder="Address Line 2" type="text" value="">
  </div>
  <div>
    <input class="form-control" id="City" name="City" placeholder="City" type="text" value="">
  </div>
  <div>
    <input class="form-control" id="Zip" name="Zip" placeholder="Zip" type="text" value="">
  </div>
    <div>
    <input class="form-control" id="SomeOtherField" name="SomeOtherField" placeholder="Some Other Required Field" type="text" value="">
  </div>
  <div>
    <button id="bnSaveApplication" type="submit">Save</button>
  </div>
</form>

Answer 1

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

为所有需要作为组处理的控件添加了自定义class。

在 unhighlight 期间，从使用此自定义 class 装饰的所有元素中删除错误 class。此外，删除错误消息的 label 个元素。

    unhighlight: function (input) {
            $(input).removeClass("error");

            if (isNameEmpty()) {
              $(".custom-class").removeClass("error");
              $(".custom-class").siblings("label").remove();
            }
        }

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

JQuery 验证 - 字段不会变得不突出

JQuery Validation - Fields are not getting unhighlited

javascript

jquery

jquery-validate