Click here to Skip to main content
13,350,289 members (48,029 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 11 Jun 2012

Customize HTML5 Form Validation with JavaScript and CSS

, 27 Apr 2013
Rate this:
Please Sign up or sign in to vote.
How to customize HTML5 form validation with JavaScript and CSS


With HTML5, to check forms validity, new input type values (email, URL, etc.) and also the pattern attribute were introduced, but the control is done when the form is submitted.

Is there a way to do this before that?


There are many ways to personalize control validation, not only the message of error with setCustomValidity or the use of title and x-moz-errormessage into input tag,  but also calling the checkValidity() function to check inputs values, on some input event as onchange.

Here is the JavaScript code of example:

window.onload=function() {
    var query = ["input[pattern]", "input[type=email]"];
    for(var q = 0; q < query.length; q++) {
        var inp = document.querySelectorAll(query[q]);
        for(var i = 0; i < inp.length; i++) {
                inp[i].onkeyup = validation;

function validation(event) {
    var p = this.parentNode.querySelector("p");
    if (this.checkValidity() == false) { //the control is here!
    } else {

And this is the HTML code:

      <label for="input01">Name</label>
            <input type="text" pattern="[a-zA-Z ]+" 

              required title="Insert only letters of the alphabet" 

              id="input01" name="name" >
            <p class="err-msg"></p>
          <label for="input02">Pin</label>
          <div >
            <input type="text" pattern="[a-zA-z0-9]{16}"  

              required  title="Insert 16 chars" maxlength="16" 

              id="input02"  name="pin"> 
            <p  class="err-msg"></p>
           <label for="input03">Cellphone</label>
            <input type="text"  pattern="[0-9]+" 

              required  title="Insert only numbers chars" id="input03" name="cell" >
            <p class="err-msg"></p>
          <label for="input04">Email</label>
          <div >
              <input type="email" required title="Insert a valid email" 

              id="input04" name="email">
            <p class="err-msg"></p>
     <div style="width:100%; text-align:center;">
       <input type="submit">
       <input type="reset" >  

Take a look:

  • The title attribute value is used by browsers to personalize the error message for an input.
  • The required attribute specifies that an input field must be filled out before submitting the form.


You can also personalize the inputs style with pseudo-classes: :invalid, :valid, :required.

Other pseudo-classes can be found at CSS Basic User Interface Module Level 3 (CSS3 UI).

For example, with the following CSS rule, input texts will be red until the input is invalid.

input:invalid {


This article, along with any associated source code and files, is licensed under A Public Domain dedication


About the Author

Giuseppe Luciano
Software Developer
Italy Italy
My name is Giuseppe Luciano and I graduated at Salerno University (Italy).
I'm software developer and a Artificial Intelligence enthusiast

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Sumit_Sood10-Jan-13 23:43
memberSumit_Sood10-Jan-13 23:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 28 Apr 2013
Article Copyright 2012 by Giuseppe Luciano
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid