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;
}