哪个事件导致浏览器显示 HTML5 验证消息？答案

【问题标题】：Which event causes browsers to show HTML5 validation messages?哪个事件导致浏览器显示 HTML5 验证消息？
【发布时间】：2016-10-10 23:54:10
【问题描述】：

我试图了解为什么我无法根据 HTML5 验证显示浏览器验证错误消息。

我的标记中有一个要验证的字段，以及一个调查其有效性的链接，以便了解是否在点击时触发。值得注意的是，这不在表格内，从阅读HTML5 spec 来看，我不清楚这是否是一个问题。当然，我可以对表单外的字段使用 checkValidity 方法这一事实对我来说是值得一看的。

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

Javascript/JQuery

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

从我目前看到的行为来看，当我将其放入无效的电子邮件地址并尝试单击链接时，我希望这会（根据规范）触发一个“简单事件”，它，据我了解，是浏览器错误消息显示必须挂钩的内容。

但是没有出现验证消息。验证确实失败并且阻止了链接跟踪，如果我填写了有效的电子邮件，则相反。我是否遗漏了有关如何触发或处理事件的内容？

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

【问题讨论】：

您链接到的规范一直在讨论表单：它以 开头“当用户代理需要静态验证 form 元素的约束时 [ ..]” 并且规则 #1 是 “让控件成为表单所有者为表单的所有可提交元素的列表，按树顺序排列。” – 我不明白为什么预计表单验证会在以下特定情况下触发：a）您没有表单，b）您没有任何可能触发验证的代码。
我怀疑第 5 行的“email.checkValidity()”会触发验证，因为它准确地描述了该字段是否有效。鉴于我帖子中的信息——验证是逐个字段进行的，并通过简单的消息传递来报告——我怀疑有一个事件我可以挂钩，但我只是没能找到它。
什么是email？不要依赖元素 ID 作为所有浏览器的全局变量。提供minimal reproducible example
嗯，它没有。它的字面意思是检查有效性而不触发浏览器的本机行为。
所以如果没有表格怎么可能需要？

【解决方案1】：

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

在某些early W3C docs 中有一个称为reportValidity() 的方法，即available in Chrome 和on the list for possible Firefox features，虽然还不足以表示它可以使用，但这有助于指出checkValidity() 不单独向用户显示验证错误。

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

【讨论】：