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

Which event causes browsers to show HTML5 validation messages?

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

我的标记中有一个要验证的字段,还有一个 link 用于调查其有效性以确定是否在点击时触发。值得注意的是,这不在表格内,并且通过阅读 HTML5 spec 我不清楚这是否是一个问题。当然,我可以对表单外的字段使用 checkValidity 方法这一事实表明它值得一看。

HTML

<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();
  }
});

从我目前看到的行为来看,当我将其放入无效的电子邮件地址并尝试单击 link 时,我希望这(根据规范)触发"simple event",据我了解,这是必须挂钩的浏览器错误消息显示。

但是没有出现验证信息。验证确实失败并且 link follow 被阻止,如果我填写有效的电子邮件则相反。我是否遗漏了有关如何触发或处理事件的信息?

还有其他答案涉及在该字段周围创建一个表单和提交按钮,这将是我最后的选择,但要获得所需的功能会有很多额外的无意义的噪音,我想了解根源我所看到的原因。

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

在某些 early W3C docs, which is available in Chrome and on the list for possible Firefox features 中有一个名为 reportValidity() 的方法,虽然还不足以说明它可以使用,但这有助于指出 checkValidity() 不会 自己向用户显示验证错误。

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