鍵入時忽略HTML驗證消息

Question

重現此問題的步驟：

• 設置電子郵件/電話類型的輸入
• 根據需要設置輸入
• 點擊表格以錯誤的格式提交電子郵件
• HTML驗證消息現在應該可見。
• 繼續在輸入框中輸入文字

在插入驗證消息后在輸入框中輸入文本時，驗證消息將持續存在並顯示在每個按鍵上。

我什至嘗試在keyup事件上設置setCustomValidity("") ，但這無濟於事。

這是一個小提琴的例子 。

這是問題的gif圖像：您可以看到，直到我在電子郵件輸入中添加@gmail.com為止，它一直顯示HTML驗證。

任何幫助，將不勝感激。

源代碼相同。 的HTML

<form>

  <p>
    <label for="t2">What's your e-mail?</label>
    <input id="email" type="email" id="t2" name="email" required>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>

JS

$("#email").on("keyup", function (e) {
    if (e.target.value.lenth !== 0) {
    e.target.setCustomValidity("");
  }
});

Answer 1

當用戶按下enter且輸入驗證失敗時，該輸入將引發invalid事件。 因此，您可以添加invalid處理程序以自定義（並可能阻止）結果行為。 該invalid事件不會得到由普通字符進一步的輸入觸發，但是無效的彈出將不斷出現，只要輸入保持無效，重點突出 。 當輸入未聚焦（模糊）時，驗證彈出窗口將消失。 僅當用戶重新調整input焦點並在輸入文本仍然無效時按enter時，它才會重新出現。

因此，一種可能的解決方案是添加一個invalid偵聽器，以跟蹤錯誤彈出窗口是否正在顯示。 然后，添加一個keydown偵聽器，以檢查彈出窗口是否正在顯示。 如果顯示彈出窗口，請使元素blur然后focus ，以使彈出窗口消失，直到用戶下次按下enter為止：

 let errorShowing = false; $("#email") .on('invalid', (e) => { errorShowing = true; }) .on("keydown", function(e) { if (!errorShowing) return; setTimeout(() => { this.blur(); this.focus(); }); errorShowing = false; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"> <label for="t2">What's your e-mail?</label> <input id="email" type="email" id="t2" name="email" required> </form>