Using Data Attributes for Custom Validation Messages in HTML5

The introduction of HTML 5 facilitated the writing of validation logic on users' form controls, allowing the creation of usable forms with less or no scripting. Now it is easy to mark form fields with attributes to define what kind of validation hould be applied. The REQUIRED attribute marks the designated field as required and that form can not be posted without a value entered. The PATTERN attribute applied to a field defines that field content should correspond to predefined regular expression. Both attributes can be combined on a single form field hinting that field is required and should obey a given pattern.

And now comes the interesting part. What happens if the user wants to define different validation messages when field is required and when it contradicts a given pattern? We can use field DATA attributes to customize our error messages and show a different one in each error case. Data attributes are valid HTML5, they can be used in any browser that supports HTML5 doctypes. In addition to aiding backwards compatibility, this also ensures that custom data attributes will remain a scalable, cross-platform solution well into the future. Data attributes can store different data which can be useful in later page processing.

Now let us look at the following form containing two input fields. They are meant to store a person's firstname and lastname. They are marked as required and also the fields should contain only letters.

	<form>		
        <p>
            <label for="firstname">First Name:</label>
            <input type="text" id="firstname" required pattern="^[A-Za-z\-]+$" 
	    data-error="Firstname must not be empty." data-pattern-error="Firstname must contain only letters.">
        </p>             
        <p>
            <label for="lastname">Last Name:</label>
            <input type="text" id="lastname" required pattern="^[A-Za-z\-]+$" 
	    data-error="Lastname must not be empty." data-pattern-error="Lastname must contain only letters.">
        </p>
	....

A small script paragraph comes into hand to help us define if there is invalid field on the form. Then we can iterate through invalid fields' list and check each one if there is a pattern mismatch.

    <script type="text/javascript">

	errorItems = self.form.find(":invalid");
	errorItems.each(function(index, node) {
		var item = $(this);		
		var message = (node.validity.patternMismatch ? node.dataset.patternError : node.dataset.error) || "Invalid value.";
		item.get(0).setCustomValidity(message);
	});

    </script>

If a form field is marked with invalid style, then it has failed the validation process. We extract those fields and loop through them. Dependent on a pattern mismatch we use the pattern error message or the other one. Then we can add those messages to a summary list and display them to alert the user. We can see how the data attributes have come to help and easily solve the error message issue. By default we can use the TITLE attribute to store a validation message for the field. But that message also appears as tooltip message when hovering the control. So appears that the solution with using data attributes is more convenient and easy to implement.