JavaScript Form Validation | validate form data input, password radio

Form Validation

JavaScript Form Validation is the process of validating form data on submit. This includes validation of inputs, select, radio buttons, checkbox, file, textarea etc. Validating form data on client side is very important.

Form Validation was the primary reason of JavaScript development. Till 1995, backend servers were validating form data which took around 20 seconds ( for 32kbps dialup internet speed). By validating form data on client side can save this time and can also reduce extra load on servers.

Validate input type text

validating input type text done by checking empty textboxes or characters not matching with pattern.

Name Validation

Validate name data in form

<form name="contact">
    <label>Name: <input type="text" name="username"></label>    
    <button>Submit</button>
</form>

<script>
document.contact.onsubmit=function(){
    if(this.username.value==""){
        alert("Enter Name");
        this.username.focus();
        return false;
    }
    else{
        alert("Thanks " + this.username.value);
    }
}
</script>

validation using addEventistener

<form name="contact">
    <label>Name: <input type="text" name="username"></label>    
    <button>Submit</button>
</form>

<script>
document.contact.addEventListener("submit",function(e){
    if(this.username.value==""){
        alert("Enter Name");
        this.username.focus();
        e.preventDefault()
    }
    else{
        alert("Thanks " + this.username.value);
    }
})
</script>

Password validation

Password validation is the second most important validation. A password should not be blank and match pattern.

<form name="contact">
    <label>Password: <input type="password" name="userpass"></label>    
    <label><input type="checkbox" name="chk"> Show Password</label>    
    <button>Submit</button>
</form>

<script>
document.contact.chk.onchange=function(){
    if(this.checked==true){
        document.contact1.userpass.removeAttribute("type");
        document.contact1.userpass.setAttribute("type","text");
    }
    else{
        document.contact1.userpass.setAttribute("type","password");
    }
} 

document.contact.onsubmit=function(){
   var patt=/[0-9a-zA-Z]{6,12}/;
    if(this.userpass.value==""){
        alert("Enter Password");
        this.userpass.focus();
        return false;
    }
    else if(patt.test(this.userpass.value)==false){
        alert("Enter valid Password");
        this.userpass.focus();
        return false;
    }
    else{
        alert("Thanks ");
    }
}
</script>

Password Not Match

For signup form, there are two input type passwords. The second password value should match first. The reason to use two input type password is to insure user has entered same password.

<form name="contact">
  <label>Password: <input type="password" name="userpass1"></label>
  <label>Re Enter Password: <input type="password" name="userpass2"></label>    
<button>Submit</button>
</form>

<script>
document.contact.onsubmit=function(){
    if(this.userpass1.value==""){
        alert("Enter Password");
        this.userpass1.focus();
        return false;
    }
    else if(this.userpass2.value==""){
        alert("Enter Password");
        this.userpass2.focus();
        return false;
    }
    else if(this.userpass1.value!=this.userpass2.value){
        alert("Password doesn't match");
        this.userpass2.focus();
        return false;
    }
    else{
        alert("Thanks ");
    }
}
</script>

Radio button validation

Radio buttons are always used in group with same name attribute. To validate radio buttons, we have to check whether one of them is checked or not. See example

<form name="contact">
  <label> <input type="radio" name="gender"> : Male</label>    
  <label> <input type="radio" name="gender"> : Female</label>    
  <button type="reset">Reset</button>
  <button>Submit</button>
</form>

<script>
document.contact.onsubmit=function(){
    if(this.gender[0].checked==false && this.gender[1].checked==false){
        alert("Choose Gender");
        return false;
    }
    else{
        alert("Thanks ");
    }
}
</script>

Validate Select Dropdown

To validate select dropdown, add value attribute with blank string to first option, with selected and disabled attribute. If submitted value is blank string, return an error. See example

<form name="contact">
<label>
    <select name="city">
        <option value="" selected disabled>--Choose City--</option>
        <option>New Delhi</option>
        <option>Chennai</option>
        <option>Mumbai</option>
        <option>Kolkata</option>
    </select>
</label>
  <button>Submit</button>
</form>

<script>
document.contact.onsubmit=function(){
    if(this.city.value==""){
        alert("Choose City");
        this.city.focus();
        return false;
    }
    else{
        alert("Thanks ");
    }
}
</script>