Как использовать функцию showErrors для отображения централизованного сообщения об ошибке и изменения цвета границы ввода

Question

Я использую функцию showError с jQuery validate для вывода единственного сообщения об ошибке внизу моей формы. Функциональность этого работает. Однако у меня есть две небольшие модификации, которые я пытаюсь выяснить.

1. Как можно заставить границы изменить цвет на входы с ошибками.

Правка - я разобрался с № 1 выше. Мне просто нужно выяснить # 2.

2. Прямо сейчас, если я заполню один вход и затем щелкну на другом входе или где-нибудь еще на странице, появится сообщение об ошибке «# formErrors» из функции showErrors. Я хочу, чтобы он заполнялся только тогда, когда пользователь пытается отправить форму.

Есть идеи?

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

Прямо сейчас, если я заполню один вход, а затем щелкну на другом входе или в другом месте на странице, появится сообщение об ошибке «# formErrors» из функции showErrors. Я хочу, чтобы он заполнялся только тогда, когда пользователь пытается отправить форму.

Согласно документации для 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>