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

问题描述

我使用表单基本验证来检查电子邮件格式是否正确，然后通过Ajax发送数据，以检查电子邮件地址是否已被使用，并且用户是否选择国家/州或在选择框中保留默认值。但是对于需要完成HTML5表单验证的提交事件，点击提交后，如果它通过了基本表单验证，则执行Ajax操作，但当结果进入I时想要使用相同的浏览器工具提示来获得界面一致性（以及我喜欢它们的外观）。

那么有没有办法让它们显示出来，我无法找出他们是否有一些特殊事件或类似于解雇提交事件但立即停止的事件。现在这个字段只有一个红色的边缘，鼠标悬停在它上面会出现错误信息，而工具提示会再次显示，然后单击提交按钮。

另外对于浏览器， t本地工具提示（在我的情况下，Safari）我使用Webshims Lib，它的行为与Chrome和Firefox完全一样。

解决方案

我认为 .checkValidity（）可以做到这一点，但它不会触发UI。

听起来像 .reportValidity（）将会做你想做的事。
http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity

我不知道是否有浏览器实现它：/ $ / $>

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.

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.

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.

解决方案

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

It sounds like .reportValidity() is going to do what you want. http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity

I don't know if any browsers implement it yet though :/

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