如何以编程方式显示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对此答案的评论。

...然后我的测试显示，在＆lt; form＆gt; （testcase中包含的元素上调用checkValidity 时，Firefox和Chrome都会显示它），但不在独立元素上（testcase）。

似乎没有机制可以在没有表单时显示它，并且必须显示规范doesn't even say以响应程序化checkValidity调用（在元素或表单上） ） - 仅在提交表格时。

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

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

Answer 2

尝试使用required="required"并删除oninvalid处理程序，除非您真的需要它。

http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/

此工作示例：https://support.mozilla.com/en-US/users/register

Answer 3

只需将“无效”属性设置为不正确的字段即可。 小例子：

var form = $('#myForm').get(0);
if(typeof formItem.checkValidity != 'undefined' && !formItem.checkValidity()) {
    $('input:required').each(function(cnt, item) {
        if(!$(item).val()) {
            $(item).attr('invalid', 'invalid');
        }
    });
    return false;
}