Validation must be toggle or input field

Question

My Goal: I have a page containing toggle buttons and an "Other" input field. The user must select one of the options. If the options has not been selected, then only one validation message will appear (message: "Please select one"). If user selects the the toggle button, then the validation message will disappear. However, if the user enters the wrong text within the input field, then only the validation will appear for that specific input field (message: saying please enter number).

My Problem : When I select the submit button, both validation messages are displaying at the same time, when I only want one validation message to display at a time . The input field titled "Other" should only display its validation message when an error is typed in the input field. Does anyone how i can display the validation message one at time? I research but could not find answers. If you have sources, feel free to provide any. If I get negative points, please inform me why so I can improve on my questions. Thanks!

What I tried: I used an if statement that hides the input validation message if text isnt entered (onkeyup). Else displays the input validation if text is entered in the input. It did not work for me.

 $(document).ready(function() { /*----------------------VALIDATING----------------------*/ $('.btnNext').click(function(e) { function validateNumber(number) { var numberPattern = /[^A-Za-z]/; return numberPattern.test(number); } var focusSet = false; //SELECT FRUIT BUTTON if (!$('.toggle_monthly_button').hasClass('selected')) { if ($(".toggle_list_monthly").parent().next(".Inval").length == 0) { $(".toggle_list_monthly").parent().after("<div class='Inval spacing'>Please select one</div>"); $(".selected").parent().next(".Inval").remove(); } } else { $('.Inval').remove(); } //OTHER - REMOVES VALUE IF SELECTING OTHER INPUT FIELD if (!$('#input_total_monthly').val()) { if ($("#input_total_monthly").parent().next(".Inval").length == 0) { } if (!validateNumber($('#phonePanelTwo').val())) { } //e.preventDefault(); $('#input_total_monthly').focus(); focusSet = true; } else { //ok $('.Inval').remove(); } //NUMBER if (!$('#input_total_monthly').val()) { //if not valid if ($('#input_total_monthly').parent().next('.Inval').length == 0) { $("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please enter number</div>"); } } else { //ok $("#input_total_monthly").parent().next(".Inval").remove(); } if (!validateNumber($('#input_total_monthly').val())) { if ($('#input_total_monthly').parent().next('.Inval').length == 0) { $("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please fix number format</div>"); } } }); /*----------------------END OF VALIDATING----------------------*/ /*Toggle donation button*/ $('.toggle').on('click', function() { $('.toggle').removeClass('selected'); $('.toggle').attr('aria-pressed', false); $(this).addClass('selected'); $(this).attr('aria-pressed', $(this).attr('aria-pressed') == 'false' ? 'true' : 'false'); }); /*Deselects the BUTTONS when selecting "Other" */ $("#input_total_monthly").click(function() { $(".js-tabs").find(".selected").removeClass('selected'); $(".js-tabs").find('.toggle').attr('aria-pressed', false); }); // Bind keyup event on the input $('#input_total_monthly').focus(function() { // If value is not empty if ($('#input_total_monthly').val().length < 0) { // Hide the element $(".toggle_list").removeAttr('id', 'id-select_monthly_amnt'); } else { // Otherwise show it $(".toggle_list").attr('id', 'id-select_monthly_amnt'); } }).keyup(); // Trigger the keyup event, thus running the handler on page load }); 

 .input_container_content{ float:right; } .Inval { color:red !important; } .Input_Msg{ margin-top:-24px !important; margin-left:10px !important; position:absolute; } .Input_two_Msg{ position: absolute; margin-top: 17px; } .toggle_size { padding: 17px 44px; width: 6.5em; text-align:center; display:inline-block; text-align:center; margin:1px 1px; cursor:pointer; border: 3px solid black; } 

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="row"> <table class="toggle_list_monthly" role="presentation"> <tr> <th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">1</button></th> <th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">2</button></th> <th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">3</button></th> </tr> </table> <table class="input_container_content"> <tr> <th> <form> <fieldset> <label class="control-label">Other</label> <input name="total" id="input_total_monthly" /> </fieldset> </form> </th> </tr> </table> </div> <button value="" class="btnNext">Submit</button> </body> </html> 

Answer 1

Updated your code.

 $(document).ready(function () { var focusSet = false; /*----------------------VALIDATING----------------------*/ $('.btnNext').click(function (e) { function validateNumber(number) { var numberPattern = /[^A-Za-z]/; return numberPattern.test(number); } $('.Inval').remove(); //clear any errors //If focus is set only fire input text validation. if (focusSet) { //Fire validations for input text //OTHER - REMOVES VALUE IF SELECTING OTHER INPUT FIELD if (!validateNumber($('#phonePanelTwo').val())) { if ($('#input_total_monthly').parent().next('.Inval').length == 0) { $("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please enter valid number</div>"); } } $('#input_total_monthly').focus(); //NUMBER if (!$('#input_total_monthly').val()) { //if not valid if ($('#input_total_monthly').parent().next('.Inval').length == 0) { $("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please enter number</div>"); } } else { //ok $("#input_total_monthly").parent().next(".Inval").remove(); } if (!validateNumber($('#input_total_monthly').val())) { if ($('#input_total_monthly').parent().next('.Inval').length == 0) { $("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please fix number format</div>"); } } } else { //SELECT FRUIT BUTTON if (!$('.toggle_monthly_button').hasClass('selected')) { if ($(".toggle_list_monthly").parent().next(".Inval").length == 0) { $(".toggle_list_monthly").parent().after("<div class='Inval spacing'>Please select one</div>"); //$(".selected").parent().next(".Inval").remove(); } } } }); /*----------------------END OF VALIDATING----------------------*/ /*Toggle donation button*/ $('.toggle').on('click', function () { focusSet = false; $('.toggle').removeClass('selected'); $('.toggle').attr('aria-pressed', false); $(this).addClass('selected'); $(this).attr('aria-pressed', $(this).attr('aria-pressed') == 'false' ? 'true' : 'false'); $('#input_total_monthly').val(''); }); /*Deselects the BUTTONS when selecting "Other" */ $("#input_total_monthly").click(function () { $(".js-tabs").find(".selected").removeClass('selected'); $(".js-tabs").find('.toggle').attr('aria-pressed', false); }); // Bind keyup event on the input $('#input_total_monthly').focus(function () { focusSet = true; // If value is not empty if ($('#input_total_monthly').val().length < 0) { // Hide the element $(".toggle_list").removeAttr('id', 'id-select_monthly_amnt'); } else { // Otherwise show it $(".toggle_list").attr('id', 'id-select_monthly_amnt'); } }).keyup(); // Trigger the keyup event, thus running the handler on page load }); 

 .input_container_content{ float:right; } .Inval { color:red !important; } .Input_Msg{ margin-top:-24px !important; margin-left:10px !important; position:absolute; } .Input_two_Msg{ position: absolute; margin-top: 17px; } .toggle_size { padding: 17px 44px; width: 6.5em; text-align:center; display:inline-block; text-align:center; margin:1px 1px; cursor:pointer; border: 3px solid black; } 

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="row"> <table class="toggle_list_monthly" role="presentation"> <tr> <th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">1</button></th> <th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">2</button></th> <th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">3</button></th> </tr> </table> <table class="input_container_content"> <tr> <th> <form> <fieldset> <label class="control-label">Other</label> <input name="total" id="input_total_monthly" /> </fieldset> </form> </th> </tr> </table> </div> <button value="" class="btnNext">Submit</button> </body> </html>