HTML5 气泡消息

问题描述

输入字段必填有一个新的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 库即可使用此脚本.它也可以在没有 webshims 库的情况下工作.(但如果您使用 webshims lib，您将在包括 IE6 在内的所有浏览器中获得约束验证).如果您不想拥有这个跨浏览器，只需使用 有效性帮助脚本.文档在这里.

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 气泡消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！