键入时忽略HTML验证消息

Question

重现此问题的步骤：

• 设置电子邮件/电话类型的输入
• 根据需要设置输入
• 按错误的电子邮件格式提交表单
• HTML验证消息现在应该可见。
• 继续在输入框中输入文字

在插入验证消息后在输入框中输入文本时，验证消息将持续存在并显示在每个按键上。

我什至尝试在键盘事件中设置setCustomValidity("")，但这也无济于事。

这里是example fiddle。

这是问题的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>

{{1}}