如何同时使用 jQuery Validate 的 errorPlacement 和 showErrors

Question

我最近从验证中删除了messages函数。然后，我在jQueryvalidate的showErrors函数中放置了它，这样我就可以将所需输入的边界更改为红色。在这一点上，一切都很好，直到我添加了showErrors。

添加showErrors的原因是我希望出现一条简单的消息，而不是多条，并且边框仍然显示为红色

从我下面的片段中，您将看到当前只有showErrors在工作。有没有办法让这两者同时发挥作用。如果是，如何？

或者，这里有一个jsfiddle

调整后的JS

errorPlacement: function() {
return false;
},
showErrors: function(errorMap, errorList) {
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors();
},
submitHandler: function() {
submit();
},

$('#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
			},
			state: {
				required: true
			},
			zip: {
				required: true,
				digits: true,
				minlength: 5
			},
			email: {
				required: true,
				email: true
			}
		},
		errorPlacement: function(){
return false;
},
		 showErrors: function(errorMap, errorList) {
			$('#formErrors').html('All fields must be completed before you submit the form.');
		},
		submitHandler: function() {
		submit();
},
});

.error {
	border: 2px solid #b82222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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">
<input type="text" name="first_name" placeholder="First Name *">
<input type="text" name="last_name" placeholder="Last Name *">
<div id="formErrors"></div>
<input id="requestSubmit" type="submit" value="Submit">
</form>

Answer 1

使用showErrors中的this.defaultShowErrors()来重新激活默认消息行为。由于errorPlacement中有一个return false，所以您只能看到样式，而不能看到消息。

showErrors: function(errorMap, errorList) { // <- disable default errorPlacement
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors(); // <- re-enable default errorPlacement
},

阅读更多：jqueryvalidation.org/validate/#showrors

只包含submit()，则表示您的submitHandler已完全损坏。如果这是您真正的功能，那么完全删除submitHandler，因为常规表单提交已经是默认行为。否则，如果您在提交之前正在做一些事情，那么您需要传递一个form参数并将其附加到.submit()。

submitHandler: function(form) {  // <- pass 'form' argument into function
// do something, then submit
form.submit();  // <- attach 'form' argument to '.submit()'
}

演示：

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

.error {
border: 2px solid #b82222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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">
<input type="text" name="first_name" placeholder="First Name *">
<input type="text" name="last_name" placeholder="Last Name *">
<div id="formErrors"></div>
<input id="requestSubmit" type="submit" value="Submit">
</form>

jsFiddle版本：jsFiddle.net/ryoucqh/