Click here to Skip to main content
Click here to Skip to main content

Tagged as

Customize HTML5 Form Validation with JavaScript and CSS

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

Introduction

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?

JavaScript

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!
        p.innerHTML=this.getAttribute("title");
    } else {
        p.innerHTML="";
    }     
}

And this is the HTML code:

<form>
  <fieldset>
    <legend>Form</legend>
    <div>
      <label for="input01">Name</label>
          <div>
            <input type="text" pattern="[a-zA-Z ]+" 
              required title="Insert only letters of the alphabet" 
              id="input01" name="name" >
            <p class="err-msg"></p>
          </div>
      </div>
       <div>
          <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>
          </div>
      </div>
       <div>     
           <label for="input03">Cellphone</label>
          <div>
            <input type="text"  pattern="[0-9]+" 
              required  title="Insert only numbers chars" id="input03" name="cell" >
            <p class="err-msg"></p>
           </div>
      </div>
      <div>     
          <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>
      </div>
      
     <div style="width:100%; text-align:center;">
       <input type="submit">
       <input type="reset" >  
     </div>
  </fieldset>
</form>

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.

CSS

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 {
    color:red;
}

License

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

Share

About the Author

Giuseppe Luciano
Software Developer
Italy Italy
My name is Giuseppe Luciano and I graduated at Salerno University (Italy).
 
I'm developping software using: C++, Java, PHP, Python with MySql, MongoDB and SQLite.
Follow on   Google+

Comments and Discussions

 
GeneralMy vote of 5 PinmemberSumit_Sood10-Jan-13 23:43 

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

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

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