Jquery循环输出错误的表单验证错误信息

Question

I am having trouble with setting up the proper conditions for validating a form.

Line 46: if (input.value == '' && mail_type_selector.val() == null)

If a mail type is not selected and only the last input(Mail width) is filled and the rest out are empty. It should still output the error msg: "Please fill out the required field(s) and select a mail type"

but it's outputting the message 'Please select a mail type' from the condition on line 34.

How can I ensure that the jquery each loop will output the error message from the condition on line 46 in the event that only the last input field is filled and the rest are empty?

 /* ========================================================================== DOM Elements ========================================================================== */ const error_msg_section = $('#error_msg_section'); const mail_type_selector = $('#mail_type_selector'); /* ========================================================================== Validate form ========================================================================== */ function checkForm() { let error_msg_text = ''; let is_form_valid = true; $('form input[required]:visible').each(function(index, input) { let input_name = $(this).attr('name'); let input_label = $(this).prev('label'); // Check if a field has no value if (input.value === '') { // Add class to inputs label to indicate that it has no value input_label.addClass('empty-input'); error_msg_text = 'Please fill out the required field(s)'; } else input_label.removeClass('empty-input'); // Check if a mail type is not selected if (mail_type_selector.val() === null) { mail_type_selector.addClass('error-option-not-selected'); error_msg_text = 'Please select a mail type'; } else mail_type_selector.removeClass('error-option-not-selected'); // Check if a field has no value and if a mail type is not selected if (input.value == '' && mail_type_selector.val() == null) { error_msg_text = 'Please fill out the required field(s) and select a mail type'; mail_type_selector.addClass('error-option-not-selected'); } // Append the error message to the error section paragraph error_msg_section.text(error_msg_text); // Check if the element contains an error message if (error_msg_section.text() !== '') { is_form_valid = false; // Set to false to indicate that the form is invalid error_msg_section.addClass('display-error-msg'); // Display the error message on the UI } else { error_msg_section.removeClass('display-error-msg'); } }); return is_form_valid; } /* ========================================================================== Send Form ========================================================================== */ $('.destinations button').click(function(e) { e.preventDefault(); checkForm() }) console.log('test')

 form { display: grid; column-gap: 1em; grid-template-columns: 1fr 1fr; } form>section { border-radius: 5px; padding: 4px 15px 10px 15px; border: 1px solid #00000061; } .input-fields { display: grid; row-gap: 1em; } .input-fields>div { display: grid; } .input-fields>div>label { margin-bottom: 3px; font-size: 14px; } .shipping-info .input-fields, button { margin-top: 15px; } .input-fields label.empty-input { color: red; } #error_msg_section { text-align: center; margin-top: 10px; color: red; display: none; } #error_msg_section.display-error-msg { display: block; } select.error-option-not-selected { border-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <form> <section class="destinations"> <p>Destination</p> <div class="input-fields"> <div> <label for="city">City</label> <input type="text" id="city" name="city" required> </div> <div> <label for="state">State</label> <input type="text" id="state" name="state" required> </div> <div> <label for="zip">Zip</label> <input type="text" id="zip" name="zip" required> </div> <div> <select> <option disabled selected>Please select a country</option> <option>US</option> <option>CA</option> </select> </div> </div> <button>Send</button> </section> <section class="shipping-info"> <p>Shipping information</p> <select id="mail_type_selector"> <option disabled selected>Please select a mail type</option> <option>Letter</option> <option>Package</option> </select> <div class="input-fields"> <div> <label for="mail_weight">Mail weight</label> <input type="text" id="mail_weight" name="mail_weight" required> </div> <div> <label for="mail_length">Mail length</label> <input type="text" id="mail_length" name="mail_length" required> </div> <div> <label for="mail_height">Mail height</label> <input type="text" id="mail_height" name="mail_height" required> </div> <div> <label for="mail_width">Mail width</label> <input type="text" id="mail_width" name="mail_width" required> </div> </div> </section> </form> <p id="error_msg_section"></p>

Answer 1

I would move the logic that checks if the mail_type_selector has a value to outside of the each loop, ie

 /* ========================================================================== DOM Elements ========================================================================== */ const error_msg_section = $('#error_msg_section'); const mail_type_selector = $('#mail_type_selector'); /* ========================================================================== Validate form ========================================================================== */ function checkForm() { let error_msg_text = ''; let is_form_valid = true; $('form input[required]:visible').each(function(index, input) { let input_name = $(this).attr('name'); let input_label = $(this).prev('label'); // Check if a field has no value if (input.value === '') { // Add class to inputs label to indicate that it has no value input_label.addClass('empty-input'); error_msg_text = 'Please fill out the required field(s)'; } else input_label.removeClass('empty-input'); }); // Check if a mail type is not selected if (mail_type_selector.val() === null) { // Check if any of the input fields have already triggered a validation message if (error_msg_text) { error_msg_text = 'Please fill out the required field(s) and select a mail type'; mail_type_selector.addClass('error-option-not-selected'); } else { mail_type_selector.addClass('error-option-not-selected'); error_msg_text = 'Please select a mail type'; } } else mail_type_selector.removeClass('error-option-not-selected'); // Append the error message to the error section paragraph error_msg_section.text(error_msg_text); // Check if the element contains an error message if (error_msg_section.text() !== '') { is_form_valid = false; // Set to false to indicate that the form is invalid error_msg_section.addClass('display-error-msg'); // Display the error message on the UI } else { error_msg_section.removeClass('display-error-msg'); } return is_form_valid; } /* ========================================================================== Send Form ========================================================================== */ $('.destinations button').click(function(e) { e.preventDefault(); checkForm() }) console.log('test')

 form { display: grid; column-gap: 1em; grid-template-columns: 1fr 1fr; } form>section { border-radius: 5px; padding: 4px 15px 10px 15px; border: 1px solid #00000061; } .input-fields { display: grid; row-gap: 1em; } .input-fields>div { display: grid; } .input-fields>div>label { margin-bottom: 3px; font-size: 14px; } .shipping-info .input-fields, button { margin-top: 15px; } .input-fields label.empty-input { color: red; } #error_msg_section { text-align: center; margin-top: 10px; color: red; display: none; } #error_msg_section.display-error-msg { display: block; } select.error-option-not-selected { border-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <form> <section class="destinations"> <p>Destination</p> <div class="input-fields"> <div> <label for="city">City</label> <input type="text" id="city" name="city" required> </div> <div> <label for="state">State</label> <input type="text" id="state" name="state" required> </div> <div> <label for="zip">Zip</label> <input type="text" id="zip" name="zip" required> </div> <div> <select> <option disabled selected>Please select a country</option> <option>US</option> <option>CA</option> </select> </div> </div> <button>Send</button> </section> <section class="shipping-info"> <p>Shipping information</p> <select id="mail_type_selector"> <option disabled selected>Please select a mail type</option> <option>Letter</option> <option>Package</option> </select> <div class="input-fields"> <div> <label for="mail_weight">Mail weight</label> <input type="text" id="mail_weight" name="mail_weight" required> </div> <div> <label for="mail_length">Mail length</label> <input type="text" id="mail_length" name="mail_length" required> </div> <div> <label for="mail_height">Mail height</label> <input type="text" id="mail_height" name="mail_height" required> </div> <div> <label for="mail_width">Mail width</label> <input type="text" id="mail_width" name="mail_width" required> </div> </div> </section> </form> <p id="error_msg_section"></p>

To simplify validation I would suggest moving to a library such as jQuery validation ( https://jqueryvalidation.org/ ).