How to use showErrors function to show a centralized error message and change input border color

Question

I am using the showError function with jQuery validate to output a single error message at the bottom of my form. The functionality of this is working. However, I have two small modifications I am trying to figure out.

1. How can I get the borders to change to a different color for the inputs with the errors.

Edit - I figured out #1 above. I just need to figure out #2.

2. Right now, if I fill in one input and then click into another input or anywhere else on the page, the error message '#formErrors` from the showErrors function populates. I only want it to populate when the user tries to submit the form.

Any ideas?

 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

Right now, if I fill in one input and then click into another input or anywhere else on the page, the error message '#formErrors` from the showErrors function populates. I only want it to populate when the user tries to submit the form.

As per documentation for showErrors , it's also fired on focusout and keyup . If you only want that message to show up when you submit the form, then use the invalidHandler instead of showErrors .

Also, your submitHandler was missing the form argument so it would never be able to properly submit anything. Corrected below.

  submitHandler: function(form) { 
      form.submit();  // default behavior
  },

HOWEVER, this is exactly the default, so it's not even needed and submitHandler can be removed entirely in this case.

 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>