哪个事件导致浏览器显示HTML验证消息

Which event causes browsers to show HTML validation messages?

本文关键字：显示 HTML 验证 消息 浏览器 事件      更新时间：2023-09-26

我试图理解为什么我不能得到浏览器验证错误消息显示基于HTML验证。

在我的标记中有一个我想要验证的字段，以及一个调查其有效性的链接，以便知道是否在单击时触发。值得注意的是，这不是在表单中，从HTML规范的阅读中，我不清楚这是否是一个问题。当然，我可以对表单外的字段使用checkValidity方法，这表明它值得一看。

HTML 

<input type="email" id="email" required="required">
<a id="link" href="some_external_link" target="_blank">Do the thing</a>
jQuery JavaScript/

$("#link").on("click", function(event) {
  var email = $('#email')[0];
  if (!email.checkValidity()) {
    event.preventDefault();
  }
});

从我目前看到的行为来看，当我把它放在一个无效的电子邮件地址中并尝试单击该链接时，我希望这会(基于规范)触发一个"简单事件"，据我所知，这是浏览器错误消息显示必须连接到的。

但是没有出现验证消息。验证确实会失败，并阻止后续链接，如果我填写了有效的电子邮件，则情况正好相反。我是否遗漏了一些关于事件如何被触发或处理的信息?

还有其他的答案，包括在字段周围创建一个表单和提交按钮，这将是我最后的手段，但这是许多额外的无意义的噪音，以获得所需的功能，我想了解我所看到的根本原因。

据我所知，没有外部事件可以被钩住——浏览器在验证单个元素时不会发布任何内容，而是在处理表单时在内部完成所有工作。

在一些早期的W3C文档中有一个叫做reportValidity()的方法，它在Chrome中可用，在Firefox可能的功能列表中也有，虽然还不足以意味着它可用，但这有助于指出checkValidity() 不会向用户显示验证错误。

如果你想暂时获得这个功能，你要么必须将你的控件包装在一个表单中，并在Javascript中抑制其默认的提交行为，要么以浏览器默认实现以外的方式向用户发出验证失败的信号。

相关文章：