Customizing HTML5 Form Error Messages With JavaScript

HTML5 form elements provide explicit, definitive elements for different types of inputs on web pages, with support for native in-browser validation. However, that validation has a few disadvantages over traditional client-side approaches like JQuery:

• HTML5 form elements are not validated as the user moves through the form, but only when the user clicks the submit button;

• Perhaps more importantly, the errors provided by the browser are blandly generic, with messages such as “Please input the requested information” providing very limited guidance to the user.

For a long time I was under the impression that the browser’s native error messages could not be altered, but that’s not true: you can easily customize your HTML5 form’s feedback by using JavaScript.

I’ve provided one method of doing so previously, using CSS3 and span elements. The technique shown here uses JavaScript to customize the browser’s own built-in validation errors, providing far more variation and power.

An HTML5 form element will undergo client-side validation if it has a required attribute:

<label>eMail<input type=email required></label>

Right now, if the user leaves this field blank and presses the submit button, the browser will simply respond with “Please fill out this field”. I think we’d agree that the user deserves a more informative error message. First, we need to identify the input in JavaScript:

var email = document.querySelector('input[type="email"]');

We already know that the input will be found invalid, so we can use the associated property as the condition for creating the rest of our code:

email.oninvalid = function(e) {

e.target.setCustomValidity("");

if (!e.target.validity.valid) { e.target.setCustomValidity("Please enter a valid eMail address"); }

};

Rather oddly, JavaScript insists that the default validation error message for each input must be deleted before your custom message will be recognized.

If the user tried to complete the form at this stage, they would see the custom error message presented on the screen after pressing submit. This is a good start, but a little broad: the error will be the same no matter what the user enters, until they supply a valid eMail address. Let’s make a distinction between a blank value and one that is incomplete by changing the function slightly:

email.oninvalid = function(e) {

e.target.setCustomValidity("");

if (!e.target.validity.valid) {

 if (e.target.value.length == 0) {

e.target.setCustomValidity("This field is required");

} else {

 e.target.setCustomValidity("Please enter a valid eMail address"); }

};

Now the form will respond appropriately to different input states, rather than providing a generic error message. When the eMail address is correct, no error messages will be shown and the form will be submitted.

Conclusion

While it takes a little work, it’s very easy to insert your own custom error messages in HTML5 forms. There are many possible improvements to make to this approach, but perhaps the greatest – the fact that the JavaScript changes the content of the error while leaving the presentation of the messages unchanged – must be treated in a separate article, due to the somewhat complex and arcane CSS involved.