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