Custom validation messages for HTML5 Input elements using the constraint validation API
Join the DZone community and get the full member experience.
Join For FreeHTML5 has introduced several input types such as EMAIL, URL, RANGE,
SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented
them and are ready to be used in a HTML document. Another exciting
feature introduced in HTML5 is the form validation. Instead of writing
JavaScript to validate users input, browsers can now validate it and
show an appropriate message if the validation fails. The validation
message is shown in line with the field for which the validation has
failed. The default error message is shown when the validation fails. In
this post I'll explain how these error messages can be changed.
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" /> </form>
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) { if(input.validity.typeMismatch){ input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!"); } else { input.setCustomValidity(""); } }
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:
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.
Source: http://www.sagarganatra.com/2011/07/custom-validation-messages-for-html5.html
Opinions expressed by DZone contributors are their own.
Trending
-
What Is Envoy Proxy?
-
Incident Response Guide
-
Java String Templates Today
-
Demystifying SPF Record Limitations
Comments