如何在没有提交事件的情况下显示 setCustomValidity 消息/工具提示

Question

我正在使用表单基本验证来检查电子邮件格式是否正确，然后数据由 Ajax 发送，它检查电子邮件地址是否已在使用中以及用户是否选择国家/州或在选择框中保留默认值。

但是要完成 HTML5 表单验证，需要提交事件，如果它通过了基本表单验证，则在单击提交时执行 Ajax 操作，但是当结果出现时，我想使用相同的浏览器工具提示来实现界面一致性（而且我就像他们的样子）。

那么有没有办法让他们出现，我无法找到他们是否有一些特殊事件或类似触发提交事件但立即停止的事件。现在，该字段只有红色边缘，并且将鼠标悬停在其上时会出现错误消息，而工具提示会再次显示在单击提交按钮上。

同样对于没有本机工具提示的浏览器（在我的例子中是 Safari），我使用的是 Webshims Lib，它的行为与 Chrome 和 Firefox 中的完全相同。

原文由 Alexxandar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为 .checkValidity() 可以解决问题，但它不会触发 UI。 （ 犬）

这听起来像 .reportValidity() 做你想做的。 （ 犬）

原文由 Ben Boyle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在此链接找到答案： How to force a html5 form validation without submitting it via jQuery

基本上，您会找到一个提交按钮并点击它：

 // force form validation
document.getElementById("submitbutton").click()

您还可以在检查电子邮件地址是否正在使用后更改验证消息，然后如上所述强制进行表单验证：

 document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()

原文由 oldbam 发布，翻译遵循 CC BY-SA 3.0 许可协议