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

Posted 2023-05-07

【中文标题】如何以编程方式显示 HTML5 客户端验证错误气泡？

【英文标题】：How to programmatically display HTML5 client-side validation error bubbles?

【发布时间】：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 返回正确的值，发送和显示无效事件，但是如何以编程方式显示验证错误气泡？

【参考方案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;