如何延遲javascript警報直到操作完成

我的 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 === "[email protected]")
}

<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="[email protected]" />

  <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

uj5u.com熱心網友回復：

請參閱下面的潛在解決方案

$('.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 === "[email protected]")
}

另請參閱 JSFiddle 玩玩：https ://jsfiddle.net/jamdevgirl/gmeny6j1/9/

uj5u.com熱心網友回復：

由于驗證發生在輸入失去焦點時觸發的更改事件上，因此您無需延遲，只需在驗證之前檢查兩個輸入是否都已填充。

為此，您可以將 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 === "[email protected]")
}

<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="[email protected]" />

  <br/><br/>
<div class="validate">
  <button href='/' type='submit' id="submitForm">Submit</button>
</div>
</form>

標籤：javascript jQuery 形式 验证

上一篇：[Vue警告]：inject()只能在setup()或功能組件內部使用

下一篇：即使我從我的javascript函式回傳一個陣列，我也得到一個物件