如何在没有提交事件的情况下显示 setCustomValidity 消息/工具提示 [英] How to show setCustomValidity message/tooltip without submit event

问题描述

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

I'm using forms basic validation to check if email is correct format, then the data is sent by Ajax where it checks if email address is already in use and did the user select country/state or left default values in select boxes.

但是要完成 HTML5 表单验证需要提交事件，如果它通过，则单击提交时会执行基本的表单验证 Ajax 操作，但是当结果出现时，我想使用相同的浏览器工具提示来保持界面一致性(而且我喜欢它们的外观).

But for HTML5 form validation to be done submit event is needed, upon clicking submit if it passes that basic form validation Ajax operation is performed, but then when results come in I would like to use the same browser tooltips for interface consistency (and well I like how they look).

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

So is there a way to make them show up, I was unable to find if there is some special event for them or something like firing submit event but stopping it right away. Right now the field only gets a red edge and error message appears on hovering mouse over it, while the tooltip shows on again clicking submit button.

对于没有本机工具提示的浏览器(在我的例子中是 Safari)，我使用的是 Webshims Lib，它的作用与 Chrome 和 Firefox 中的完全相同.

Also for browsers that don't have native tooltips(in my case Safari) I'm using Webshims Lib and it acts exactly the same as in Chrome and Firefox.

推荐答案

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

I thought .checkValidity() would do the trick, but it doesn't trigger the UI. (caniuse)

听起来像.reportValidity() 做你想做的事.(caniuse)

这篇关于如何在没有提交事件的情况下显示 setCustomValidity 消息/工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！