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

【问题标题】：How to programmatically display HTML5 client-side validation error bubbles?如何以编程方式显示 HTML5 客户端验证错误气泡？
【发布时间】：2012-01-07 05:21:56
【问题描述】：

我正在尝试在表单/提交上下文之外使用 HTML5 客户端验证，但看不到如何显示验证错误气泡。考虑以下几点：

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

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

【问题讨论】：

标签： html validation

【解决方案1】：

如果你说的是这个泡泡：

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

...然后我的测试表明 Firefox 和 Chrome 在调用 checkValidity 在包裹在

~~(testcase) 中的元素上时都会显示它，但是 不在独立元素上 (testcase)。~~

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

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

更好的是，使用您自己的验证 UI，这将保护您免受未来在这个未指定区域的浏览器的更改。

【讨论】：

谢谢。在我看来，无论是在元素上还是在表单上，调用 checkValidity 时都不显示气泡；它们似乎仅在提交表单时显示，可能与 onsubmit 事件一起显示（您可以从处理程序返回 false 以防止实际提交事件）。
这个接受的答案不正确。 Chrome 19、20、21 在调用element.checkValidity() 时不显示验证气泡；当用户单击提交表单的按钮时，第一个出错的元素会在气泡中显示该错误。
@ScottR：请参阅修改后的答案中的测试用例。我不确定您为什么认为答案不正确。
单击<button> 元素会提交表单，这会触发错误消息的可见性。 checkValidity() 调用不是导致消息出现的原因；将return false; 添加到onclick 代码的末尾将防止出现错误消息，因为点击事件不会冒泡到表单（然后会触发提交事件）。 spec 表示按钮的默认type 是submit，如果将其更改为type="button"，它也可以防止错误显示。
@ScottR：感谢您的澄清！我没有验证你的理论，但它似乎是正确的。（虽然不知道这种情况下的礼仪是什么！）

【解决方案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

【讨论】：

其实required="required"就够了。

【解决方案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;
}

【讨论】：