前端之家收集整理的这篇文章主要介绍了
如何以编程方式显示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
