如何使用 showErrors 函数显示集中的错误消息并更改输入边框颜色

Question

我正在使用带有 jQuery 验证的 showError 函数在我的表单底部输出一条错误消息。此功能正在运行。但是，我有两个小的修改要弄清楚。

我怎样才能让有错误的输入的边框变成不同的颜色。

编辑 - 我在上面找到了#1。我只需要弄清楚#2。

现在，如果我填写一个输入，然后单击另一个输入或页面上的其他任何位置，则会填充来自 showErrors 函数的错误消息“#formErrors”。我只希望它在用户尝试提交表单时填充。

有什么想法吗？

var send = false;

 $('#catalogRequestForm').validate({
  ignore: [],
  rules: {
   first_name: {
    required: true,
    minlength: 2
   },
   last_name: {
    required: true,
    minlength: 2
   },
   address1: {
    required: true,
    minlength: 5
   },
   city: {
    required: true,
    minlength: 2
   }
  },
  errorPlacement: function() {
            return false;
        },
   showErrors: function(errorMap, errorList) {
   $('#formErrors').html('All required fields must be completed before you submit the form.');
   this.defaultShowErrors();
  },
  submitHandler: function() {
            submit();
        },
 });

#formErrors {
 color: #b82222;
 font-family: 'Nunito', sans-serif;
 font-size: 1rem;
 margin: 10px auto;
}
input.error {
  border: 1px solid #b82222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<form method="POST" id="catalogRequestForm">
  <!-- Form Fields -->
  <input type="text" class="input2" id="first_name" name="first_name" placeholder="First Name *">
  <input type="text" class="input2 margRightN" id="last_name" name="last_name" placeholder="Last Name *">
  <input type="text" class="input block" id="company" name="company" placeholder="Company Name">
  <input type="text" class="input block" id="address1" name="address1" placeholder="Address 1 *">
  <input type="text" class="input block" id="address2" name="address2" placeholder="Address 2">
  <input type="text" class="input3" id="city" name="city" placeholder="City *">
  <select class="input3" id="state" name="state">
    <option value="">State *</option>
    <option value="AL">Alabama</option>
  </select>
  <div id="formErrors"></div>
  <input id="requestSubmit" class="button" type="submit" value="Request Catalog">
</form>

Answer 1

Right now, if I fill in one input and then click into another input or anywhere else on the page, the error message '#formErrors` from the showErrors function populates. I only want it to populate when the user tries to submit the form.

As per documentation 对于 showErrors，它也在 focusout 和 keyup 上触发。如果您只想在提交表单时显示该消息，请使用 invalidHandler 而不是 showErrors。

此外，您的 submitHandler 缺少 form 参数，因此它永远无法正确提交任何内容。更正如下。

  submitHandler: function(form) { 
      form.submit();  // default behavior
  },

但是，这正是默认设置，因此甚至不需要，在这种情况下 submitHandler 可以完全删除。

var send = false;

$('#catalogRequestForm').validate({
  ignore: [],
  rules: {
    first_name: {
      required: true,
      minlength: 2
    },
    last_name: {
      required: true,
      minlength: 2
    },
    address1: {
      required: true,
      minlength: 5
    },
    city: {
      required: true,
      minlength: 2
    }
  },
  errorPlacement: function() {
      return false;
  },
  invalidHandler: function(event, validator) {
    $('#formErrors').html('All required fields must be completed before you submit the form.');
  }
});

#formErrors {
  color: #b82222;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  margin: 10px auto;
}

input.error {
  border: 1px solid #b82222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<form method="POST" id="catalogRequestForm">
  <!-- Form Fields -->
  <input type="text" class="input2" id="first_name" name="first_name" placeholder="First Name *">
  <input type="text" class="input2 margRightN" id="last_name" name="last_name" placeholder="Last Name *">
  <input type="text" class="input block" id="company" name="company" placeholder="Company Name">
  <input type="text" class="input block" id="address1" name="address1" placeholder="Address 1 *">
  <input type="text" class="input block" id="address2" name="address2" placeholder="Address 2">
  <input type="text" class="input3" id="city" name="city" placeholder="City *">
  <select class="input3" id="state" name="state">
    <option value="">State *</option>
    <option value="AL">Alabama</option>
  </select>
  <div id="formErrors"></div>
  <input id="requestSubmit" class="button" type="submit" value="Request Catalog">
</form>

如何使用 showErrors 函数显示集中的错误消息并更改输入边框颜色

How to use showErrors function to show a centralized error message and change input border color

javascript

jquery

jquery-validate