Javascript Forms

Forms are the basics of HTML and we use HTML form element in order to create the JavaScript form. We should always validate the form submitted by the user because it can have inappropriate values. So, validation is must to authenticate user.

Through JavaScript, we can validate name, password, email, date, mobile numbers and more fields.

It also provides facility to validate the form on the client-side.So, data processing will be faster than server-side validation.

Input:-
<body> 
    <form name="myform" method="post" onsubmit="return validateform()" >  
        Name: <input type="text" name="name"><br/>   
        <input type="submit" value="register">  
    </form>  
    <script>
        function validateform(){  
            var name=document.myform.name.value;  
            if (name==null || name==""){  
                alert("Name can't be blank");  
                return false;  
            }
        }
    </script> 
</body>

Output:-


Retype Password Validation

We can set the validation to check the password entered by user and if it does not match, it should alert the user that password should match.

Input:-
 <body> 
    <form name="f1" onsubmit="return passwordMatch()">  
        Password:<input type="password" name="password" /><br/>  
        Re-enter Password:<input type="password" name="password2"/><br/>  
        <input type="submit">  
    </form>  
    <script>
        function passwordMatch(){  
            var firstpassword=document.f1.password.value;  
            var secondpassword=document.f1.password2.value;  
            
            if(firstpassword==secondpassword){  
                return true;  
            }  
            else{  
                alert("password must be same!");  
                return false;  
            } 
        }
    </script> 
</body>  

Output:-


Number Validation

We can validate the text field for numeric value and for that, isNaN() function is used.

Input:-
 <body> 
<form name="myform" onsubmit="return validateNumber()" >  
        Number: <input type="text" name="num"><span id="numloc"></span><br/>  
        <input type="submit" value="submit">  
    </form>   
    <script>
        function validateNumber(){  
            var num=document.myform.num.value;  
            if (isNaN(num)){  
                document.getElementById("numloc").innerHTML="Enter Numeric value only";  
            return false;  
            }
            else{  
                return true;  
            } 
        }
    </script> 
</body>  

Output:-


Email Validation

For email validation, there are many criteria that need to be follow to validate the email id such as:-

  • Email id must contain the @ and . character
  • There must be at least one character before and after the @.
  • There must be at least two characters after . (dot).
Input:-
 <body> 
	   <form name="myform"  method="post" onsubmit="return validateemail();">  
        Email: <input type="text" name="email"><br/>  
        <input type="submit" value="register">   
    </form>   
    <script>
        function validateemail(){  
            var x = document.myform.email.value;  
            var atposition = x.indexOf("@");  
            var dotposition = x.lastIndexOf(".");  
            if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){  
                alert("Please enter a valid e-mail address");  
                return false;  
            }  
        }
    </script>
</body>  

Output:-