前端之家收集整理的这篇文章主要介绍了
如何以编程方式显示HTML5客户端验证错误的气泡?,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在表单/提交上下文之外使用HTML5客户端验证,但是看不到如何
显示验证
错误泡沫。考虑以下几点:
<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes,invalid')">
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button>
一切都按预期工作,从checkValidity返回正确的值,并发送和显示无效事件,但是如何以编程方式显示验证错误泡泡?
如果你在谈论这个泡沫:
请看ScottR对这个答案的评论。
…然后我的测试显示,Firefox和Chrome在调用< form>中包含的元素上调用checkValidity时显示它。 (testcase),但不是独立元素(testcase)。
当没有表单时,似乎没有显示它的机制,并且规范doesn’t even say必须显示以响应程序化checkValidity调用(在元素或表单上) – 只有在提交表单时。
所以现在,把你的元素包装成一个表单,即使你不会真的提交它。
更好的是,使用您自己的验证UI,这将防止您在此不明确区域的浏览器中的将来更改。
原文链接:https://www.f2er.com/html5/168914.html