如何延迟 javascript 警报直到操作完成

Question

我的 javascript 验证我表单上的两个字段，确保用户输入与我的 javascript 中的值相匹配，然后他们才能继续注册或提交表单。

但是，当他们提供错误的值时，他们会收到一条警告，告诉他们这些值不匹配！此外，当他们提供正确的值时，他们还会收到继续注册的警报。

我注意到当用户填写第一个字段时弹出警告框以通知用户，并且在填写第二个字段时也会弹出。

是否有可能隐藏警报，直到用户完成两个字段，然后弹出警报以通知用户输入正确或错误？

我们将不胜感激任何帮助。

下面是我的代码；

$('.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

请参阅下面的潜在解决方案

$('.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")
}

另请参阅 JSFiddle 来玩：https://jsfiddle.net/jamdevgirl/gmeny6j1/9/

Answer 2

由于验证发生在输入失去焦点时触发的更改事件上，因此您不需要延迟，只需在验证前检查两个输入是否都已填写。

您可以将 else 块转换为 if else 块，并检查 email 和 phone 字段值是否具有长度。

$('.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>

如何延迟 javascript 警报直到操作完成

How to delay a javascript alert until action is completed

javascript

forms

validation

jquery