How to delay a javascript alert until action is completed

Question

My javascript validates two fields on my form making sure that user input matches the values in my javascript before they are allowed to continue with their registration or submit the form.

However, when they provide the wrong values, they get an alert that tells them the values do not match! Also, when they provide the correct values, they also get an alert to continue their registration.

I noticed that the alert box pops up to notify users once they fill out the first field and it also pops up when the second field is filled.

Is there a possible means to hide the alert until the user completes both fields before the alert pops up to notify the user if their inputs are correct or wrong?

Any help will be truly appreciated.

Below are my codes;

 $('.validate').hide(); $('#phone, #email').on('change', function() { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { $(".validate").show(); } else { alert ("Phone or Email do not match!\nYou cannot submit this form!"); $(".validate").hide(); } }); $('#theForm').on('submit', function(e) { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { // validation failed. cancel the event console.log("not submitting"); e.preventDefault(); return false; } }) function isDataInUse(phone, email) { return (phone === "1234" && email === "1234@gmail.com") }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="theForm"> <div class="validate"><span style="color: red;"><b>Phone and Email Matches!</b></span></div> <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" /> <br/><br/> <input type="email" name='email' required='' id="email" placeholder="hello@youremail.com" /> <br/><br/> <div class="validate"> <button href='/' type='submit' id="submitForm">Submit</button> </div> </form>

http://www.nirsoft.net/utils/product_cd_key_viewer.html

Answer 1

Please see potential solution below

$('.validate').hide();

$('#phone, #email').on('change', function() {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    $(".validate").show();
  } else {
  
  if(phone.trim().length > 0 && email.trim().length > 0) {
   alert ("Phone or Email do not match!\nYou cannot submit this form!");
  }
    $(".validate").hide();
  }
});

$('#theForm').on('submit', function(e) {
  let phone = $('#phone').val();
  let email = $('#email').val();
  if (isDataInUse(phone, email)) {
    // validation failed. cancel the event
    console.log("not submitting");
    e.preventDefault();
    return false;
  }
})

function isDataInUse(phone, email) {
  return (phone === "1234" && email === "1234@gmail.com")
}

Please also see JSFiddle to play around with: https://jsfiddle.net/jamdevgirl/gmeny6j1/9/

Answer 2

Since the validation is occurs on the change event, which is triggered when the input loses focus, you don't need to delay, but only to check that both inputs are filled before the validation.

You can do so by turning the else block into a if else block, and checking that both email and phone field values have a length.

 $('.validate').hide(); $('#phone, #email').on('change', function() { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { $(".validate").show(); } else if (phone.length && email.length && !isDataInUse(phone, email)) { alert ("Phone or Email do not match!\nYou cannot submit this form!"); $(".validate").hide(); } }); $('#theForm').on('submit', function(e) { let phone = $('#phone').val(); let email = $('#email').val(); if (isDataInUse(phone, email)) { // validation failed. cancel the event console.log("not submitting"); e.preventDefault(); return false; } }) function isDataInUse(phone, email) { return (phone === "1234" && email === "1234@gmail.com") }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <form action='' method='POST' id="theForm"> <div class="validate"><span style="color: red;"><b>Phone and Email Matches!</b></span></div> <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" /> <br/><br/> <input type="email" name='email' required='' id="email" placeholder="hello@youremail.com" /> <br/><br/> <div class="validate"> <button href='/' type='submit' id="submitForm">Submit</button> </div> </form>