Question

我最近从验证中删除了消息功能。然后，我将其放在jQuery validate的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

使用this.defaultShowErrors()中的showErrors重新激活默认消息行为。由于您在return false中有一个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
},

Read more: 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/

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

1 个答案: