如何延迟 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>