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

Question

我最近从验证中删除了消息功能。然后我将其放入 jQuery validateshowErrors函数中，这样我就可以将所需输入的边框变为红色。在这一点上，一切都运行良好，直到我添加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>

标签： javascriptjqueryjquery-validate

Answer 1

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

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/#showerrors

仅包含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/ryoufcqh/