Jul 8, 2011

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

HTML5 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:

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.

8 comments:

  1. Thanks for the useful guidelines, I am sure it will be helpful both to my brother and I - we are only beginners in API, but I hope with this tutorial we will figure everything out - as they say, two minds are better than one. Once again, thanks for posting!

    ReplyDelete
  2. can u please put up a demo for this, seems this code doesn't work...Indeed I copy the same the exact snippet into HTML5 page, it din't work

    ReplyDelete
  3. can u please put up a demo for this, seems this code doesn't work...Indeed I copied the same code snippet into HTML5 page, it din't work!!

    ReplyDelete
  4. In your markup specify the oninput handler for the input field:











    The check function is same as mentioned in the blog post. Let me know if this works for you.

    ReplyDelete
  5. Hi Sagar,
    Yes it works, Thank u very much for the wonderful code.

    Is there any way to change the look and feel of the error bubble?

    ReplyDelete
  6. I have not tried it, but looks like you can use pseudo classes to get the desired effect. Read this: http://adhockery.blogspot.in/2011/03/styling-with-html5-form-validation.html

    ReplyDelete
  7. Thanks, I tried few from the reference link, it works ;)

    ReplyDelete
  8. Thanks it saves my time.

    ReplyDelete