Over a million developers have joined DZone.

Custom validation messages for HTML5 Input elements using the constraint validation API

DZone 's Guide to

Custom validation messages for HTML5 Input elements using the constraint validation API

· Web Dev Zone ·
Free Resource

Take an example of a form that has an input element with type="email" and a submit button:
<form id="myForm">
<input id="eid" name="email_field" type="email" />
<input type="submit" />
After entering some text in the input field and on clicking the submit button, the default validation message is shown:

The message style varies from browser to browser and the one shown in this picture is taken from Google's Chrome browser.

As you can see, message "Please enter an email address." is shown when the user enters an invalid email address and clicks the submit button. This message is shown inline with the input field.

To show a custom message, instead of default one the constraint validation API is used. Here the user can set the custom validation message using element.setCustomValidity(message):
 function check(input) {  
input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
else {  

From the code, the function check accepts a HTMLInputElement ( input) as a parameter and checks for the validity of the input text entered against its type using input.validity.typeMismatch. It is set to true if the entered text doesn't match the specified input type. The input.setCustomValidity(message) is then used to set the validation message. Now whenever the validation fails the custom message will be shown:

Similarly the custom validation message can be set in various conditions, such as required filed not entered -  element.validity.valueMissing, element value doesn't match the pattern -  element.validity.patternMismatch, value is lower than the provided minimum -  element.validity.rangeUnderflow, value is higher than the maximum -  element.validity.rangeOverflow.

One can set such validation messages in various use cases as well. Say, when the entered text is not one of the expected values or when the confirmation email address doesn't match with the original email address. In such cases showing a custom validation message comes very handy.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}