Как использовать jQuery Validate errorPlacement и showErrors одновременно

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
},

Подробнее : 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()'
}

DEMO

$('#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 /