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

Question

我使用 showError 函数和 jQuery validate 在表单底部输出一条错误消息。该功能正在发挥作用。不过，我有两个小修改正在尝试弄清楚。

1. 如何将有错误的输入的边框更改为不同的颜色。

编辑 - 我发现了上面的#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>