How to delay a javascript alert until action is completed

May 29, 2022

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

>Solution :

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/