HTML5泡泡消息 [英] HTML5 Bubble Messages

问题描述

输入字段 required 有一个新的HTML5属性，在提交表单时弹出一个气泡消息且该字段为空。有没有办法用不同的文字弹出相同的泡泡？我想将它用于不同的验证（不仅仅是它是否为空）。

There is a new HTML5 attribute for input field required which pops up a bubble message when submitting form and the field is empty. Is there any way of popping up the same bubble with different text? I want to use it for different validations (not just if it's empty or not).

以下是Chrome中此气泡（弹出窗口）的屏幕截图：

Here is a screenshot on this bubble (pop-up) in Chrome:

推荐答案

HTML5提供了一种名为 setCustomValidity 来实现这一点。此方法是一个低级API，用于添加新的验证约束并添加新的/更改错误消息。你必须调用你的脚本，删除/添加验证消息 - 使用setCustomValidity - （在DOMready上）和输入/更改。

HTML5 provides a method called setCustomValidity to achieve exactly this. This method is a low level API to add new validation constraints and to add new/change errormessages. You have to call your script, which removes / adds the validation message - using setCustomValidity - (on "DOMready" and) on input/change.

我写了一个polyfill脚本，它不仅在所有浏览器中实现这些HTML5表单方法，还添加了customValidity--helper ，这样可以更轻松地使用自定义消息添加自定义验证约束。

I have written a polyfill script, which not only implements those HTML5 form methods in all browsers, but also adds a "customValidity"-helper, which makes it more easy to add custom validation constraints with custom messages.

注意：您不需要实现webshims lib来使用此脚本。它也适用于没有webshims lib。 （但是如果你使用webshims lib，你将在所有浏览器中获得约束验证，包括IE6）。如果您不想使用此跨浏览器，只需使用 validity-helper script 。文档是此处。

Note: You don't need to implement webshims lib to make use of this script. It also works without webshims lib. (But if you use webshims lib, you will get constraint validation in all browsers including IE6). If you don't want to have this cross-browser, simply take only the validity-helper script. Documentation is here.

请注意，如果您通过设置自定义消息对消息进行了更改，则必须提供一种清除消息的方法，例如

Note that if you do make a change to the message by setting a custom message, you have to include a way to clear the message such as

myFormElement.setCustomValidity（''）;

myFormElement.setCustomValidity('');

如果您不清除消息，表单元素将被视为无效，表单将不提交。

if you don't clear the message, the form element will be seen as invalid and the form will not submit.

这篇关于HTML5泡泡消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！