如何以编程方式显示HTML5客户端验证错误气泡？

Question

我正在尝试在表单/提交上下文之外使用HTML5客户端验证,但无法看到如何显示验证错误气泡.考虑以下:

<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes, invalid')">
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button>

一切都按预期工作,从checkValidity返回正确的值,并发送和显示无效事件,但如何以编程方式显示验证错误气泡？

Answer 1

如果你在谈论这个泡沫:

请参阅ScottR对此答案的评论.

...然后我的测试显示Firefox和Chrome在调用checkValidity 包含在<form>(测试用例)中的元素时显示它,但不在独立元素(testcase)上显示.

似乎没有一种机制可以在没有表格的情况下显示它,并且规范甚至没有说它必须显示以响应程序化checkValidity调用(在元素或表单上) - 仅在提交表单时.

所以现在,将您的元素包装在一个表单中,即使您实际上不会提交它.

更好的是,使用您自己的验证用户界面,这将使您免受此未指定区域中浏览器的未来更改.