Question

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).

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

Answer 1

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.

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.

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(”);

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