我使用forms basic验证来检查电子邮件的格式是否正确,然后通过Ajax发送数据,检查电子邮件地址是否已在使用,以及用户是否在选择框中选择了国家/州或左默认值。
但是对于要完成的HTML5表单验证,需要提交事件,在单击submit之后,如果它通过了基本的表单验证,就会执行Ajax操作,但是当结果出现时,我想使用相同的浏览器工具提示来保持界面一致性(而且我喜欢它们的外观)。
所以有没有办法让他们出现,我无法找到他们是否有一些特殊的事件,或者像触发提交事件,但立即停止它。目前,该字段仅显示红色边缘,将鼠标悬停在其上时会出现错误消息,而工具提示则再次单击提交按钮时显示。
另外,对于没有原生工具提示的浏览器(在我的例子中是Safari),我使用的是Webshims Lib,它的行为与Chrome和Firefox完全相同。
发布于 2014-01-30 21:39:41
我原以为.checkValidity()
可以做到这一点,但它并没有触发UI。(caniuse)
听起来.reportValidity()
做了你想做的事。(caniuse)
发布于 2012-12-14 02:23:00
你可以在这个链接上找到答案: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()
发布于 2014-07-03 19:14:54
这实际上非常简单--在表单中添加一个隐藏的输入元素:
<input type="hidden" id="myFormCheck" required="true" value=""/>
对要创建自定义工具提示的输入元素调用myInputField.setCustomValidity(message)
,然后调用form.click();
表单有效性流程将运行,并在该元素上显示弹出消息,但由于隐藏的元素,表单将不会提交,因此您不需要捕获和取消提交事件。
当您完成并真正准备好开始时,在隐藏元素上设置一个值,表单将正常提交。
这样,你就可以使用表单工具提示来做一些事情,比如检查可用的用户名,或者匹配HTTP请求上的任何值等等。
https://stackoverflow.com/questions/12785347
复制相似问题