Advanced Form Validation

onBlur Event

The onBlurEvent is fired when the user leaves a form field. We can use this event to apply some real time form validation.

    ....

    <body onload="main()"> 
     <form id="nameForm">
       <input type="text" name="userName" placeholder="User Name">
     </form>
   </body>

   ...

function main() {

    var nameForm = document.getElementById("nameForm");
    // listen for a onBlur event event on the userName field 
    nameForm.userName.addEventListener("blur", validateName)    
}


//onBlur call back function 
function validateName(event) {
     var nameForm = document.getElementById("nameForm");

     if(nameForm.name.value == "") {
        nameForm.name.style.backgroundColor = "red";
        return false; 
     } else {
        nameForm.userName.style.backgroundColor = "";
        return true; 
     }
}

In the above example the name input will appear red nameForm.name.style.backgroundColor = "red"; if it's empty.

results matching ""

    No results matching ""