如何以编程方式显示HTML5客户端验证错误气泡？ [英] How to programmatically display HTML5 client-side validation error bubbles?

问题描述

我正在尝试在表单/提交上下文之外使用HTML5客户端验证，但无法查看如何显示验证错误气泡。请考虑以下事项：

I'm trying to use HTML5 client-side validation outside a form/submit context, but cannot see how to display the validation error bubbles. Consider the following:

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

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

Everything works as expected, with the correct value being returned from checkValidity, and the invalid event being sent and displayed, but how do I programmatically display the validation error bubble?

推荐答案

如果你在谈论这个泡泡：

If you're talking about this bubble:

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

See ScottR's comment to this answer instead.

...然后我的测试显示Firefox和Chrome在调用<时显示它code> checkValidity 包含在< form> 中的元素（ testcase ），但不在独立元素上（ testcase ）。

...then my testing shows that both Firefox and Chrome display it when calling checkValidity on an element wrapped in a <form> (testcase), but not on a standalone element (testcase).

当没有表格时，似乎没有机制可以显示它c 甚至没有说必须显示它以响应程序化 checkValidity 调用（在元素或表单上） - 仅当提交表单。

There doesn't seem to be a mechanism to display it when there's no form, and the spec doesn't even say it has to be displayed in response to programmatic checkValidity calls (on the element or the form) -- only when submitting a form.

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

So for now, wrap your elements in a form, even if you will not actually submit it.

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

Better yet, use your own validation UI, this will shield you from future changes in the browsers in this underspecified area.

这篇关于如何以编程方式显示HTML5客户端验证错误气泡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！