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

Question

我将showError函数与jQuery validate一起使用，以在表单底部输出一条错误消息。此功能正在运行。但是，我尝试进行两个小修改。

1. 对于有错误的输入，如何使边框变为不同的颜色。

编辑-我发现上面的＃1。我只需要弄清楚＃2。

1. 现在，如果我填写一个输入，然后单击另一个输入或页面上的其他任何位置，则会显示来自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

  

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

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>