Well, we already know that with HTML5 from constraints, client side form validation has become super easy. All we have to do is use attributes like required, maxlength, pattern, step, etc. and/or the correct form type like email, phone, number, etc. and then once the user submits the form, the browser prompts invalid messages if the form is not entirely valid. Although it might not really be a requirement but from a coolness perspective I thought I’ll share the fact that the error messages can be customized.
Here’s a small demo first to prove my point:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
See the Pen html5 form validation custom messages by Rishabh (@rishabhp) on CodePen.
The error message that you see when submitting the form without writing anything in the email field is not the browser default. Playing with the error messages is done with the setCustomValidity() method of the constraint validation API.
checkValidity(), validationMessage and setCustomValidity()
Let’s talk about the checkValidity() API call first which can basically be triggered on any form element (or even the form itself) which is a candidate for form validation and if the data is invalid, an invalid event will be triggered on the element. The method itself returns false when the data is invalid, otherwise it’ll do nothing and just return true
Every form control will have a property called validationMessage which will contain the message (localized) to show to the user when the field fails to validate against the constraints (like required for instance). If the field contains valid data then this property will be set to an empty string ''.
Setting the validationMessage directly won’t work, hence the setCustomValidity() API method has to be called to override validationMessage and this is the trick to customize your error messages. If you noticed I used it initially to set a custom error message:
email.setCustomValidity('Need your email bro!');
Next, on the input event (fired as the user writes something in the input/textarea fields), if the value of the field appears to be an empty string then the custom error message for a required field is set which is shown in the browser’s default validation bubble. Otherwise if some value is set, we pass an empty string to setCustomValidity(). Although an empty string means valid data, the browser will re-evaluate the field’s data and show an error message if the data is not an actual email (helloworld@ for example).
When a form’s or an element’s validity is checked again via a submit button click or checkValidity() call, as mentioned earlier, the browser fires an invalid event that you can listen to on the form element. In this case we do that on our email field. When the email field contains invalid data and the user tries to hit enter (or click the submit button) to submit the form, the validation is triggered which in turn fires the invalid event on our email field. Right there, we again use setCustomValidity() to show another custom error message.
email.addEventListener('invalid', function () {
if (this.value.trim() !== '') {
this.setCustomValidity("'" + this.value + "' is not a valid email bro!");
}
}, false);
That’s pretty much it! Feel free to play around with the demo and get creative with error messaging. From a CSS point of view, you can use the :invalid and :valid pseudo classes to style your form fields accordingly, like showing a 2px red border on invalid fields.
Further Reading
Do consider reading these excellent articles:
- http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ – Covers pretty much everything on constraint validation. You’ll learn a lot of cool stuff that can be implemented practically.
- http://developer.telerik.com/featured/building-html5-form-validation-bubble-replacements/ – Want to replace the browser bubbles as error messages with something aesthetically better like errors right below the fields or grouped above the form ? All of that is possible.
