s

Home > html 5 > how to create form validation by using html ?

How to create form validation by using HTML ? edit button Edit

author
pavankumar.thangella17@gmail.com | calendar 23 December 2020 | 1831

Creating a Registration form in HTML using Javascript

Create registration form with step by step learning method. That helps to you learn HTML and CSS language together. How registration form or page created? in HTML just follow the below steps.

If you found any difficulty in the tutorial, then ask question by posting comment in comment box.


Step 1. Open Notepad or Visual Studio Code or Sublime text or any other Html editor. In this case, I'm using Visual Studio Code.
Step 2. Copy the below complete HTML code and paste it in your editor. 

 

<!DOCTYPE html>
<html>
<head>
<title>  Welcome To Registration Form  </title>
</head>

  <body>
  
  <div id="main">
  <div class="h-tag">
  <h2>  Create Your Account  </h2>
  </div>
  
  <div class="login">
  <table cellspacing="2" align="center" cellpadding="8" border="0">
  <tr>
  <td align="right">Enter Name :</td>
  <td> <input type="text" placeholder="Enter user here" id="t1" class="tb" /> </td>
  </tr>
  <tr>
  <td align="right"> Enter Email ID :</td>
  <td> <input type="text" placeholder="Enter Email ID here" id="t2" class="tb" /> </td>
  </tr>
  <tr>
  <td align="right"> Enter Username : </td>
  <td> <input type="text" placeholder="Enter Username here" id="t3" class="tb" /> </td>
  </tr>
  <tr>
  <td align="right"> Enter Password :</td>
  <td> <input type="password" placeholder="Enter Password here" id="t4" class="tb" /> </td>
  </tr>
  <tr>
  <td align="right"> Enter Confirm Password :</td>
  <td> <input type="password" placeholder="Enter Password here" id="t5" class="tb" /> </td>
  </tr>
  <tr>
  <td> </td>
  <td>
  <input type="reset" value="Clear Form" id="res" class="btn" />
  <input type="submit" value="Create Account" class="btn" onclick="registration()" /> </td>
  </tr>
  </table>
  </div>
  
  </div>
  
</body>
</html>

Step 3. Now apply the CSS to all Elements for better presentation. First create CSS <style> ... </style> tag in between <head> ... </head> tag like below. 

 
    <head>
        <style type="text/css">
    
              all css code come here....
    
        </style>
    </head>
Now copy the below CSS code and paste it in between <style> ... </style> tag. 
  
/* body css for whole page */
body
{
    margin:0px;
    background-color:#f26724;
    background-image:url(image/background.jpg);
    color:#f9fcf5;
    font-family:Arial, Helvetica, sans-serif;
}

Step 4. Here we will add JavaScript code for validation check. If textbox will blank, password not match, password not in valid form and email id not valid then it will give error message. Now create JavaScript <script> ... </script> tag in between <head> ... </head> tag like below example.

Example: add JavaScript tag 

 
    <head>
        <script>
    
            paste code here..
    
        </script>
    </head>
After that copy the below JavaScript code and paste it in between <script> ... </script> tag 

    

        function registration()
        {
    
            var name= document.getElementById("t1").value;
            var email= document.getElementById("t2").value;
            var uname= document.getElementById("t3").value;
            var pwd= document.getElementById("t4").value;			
            var cpwd= document.getElementById("t5").value;
            
            //email id expression code
            var pwd_expression = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
            var letters = /^[A-Za-z] $/;
            var filter = /^([a-zA-Z0-9_\.\-]) \@(([a-zA-Z0-9\-]) \.) ([a-zA-Z0-9]{2,4}) $/;
    
            if(name=='')
            {
                alert('Please enter your name');
            }
            else if(!letters.test(name))
            {
                alert('Name field required only alphabet characters');
            }
            else if(email=='')
            {
                alert('Please enter your user email id');
            }
            else if (!filter.test(email))
            {
                alert('Invalid email');
            }
            else if(uname=='')
            {
                alert('Please enter the user name.');
            }
            else if(!letters.test(uname))
            {
                alert('User name field required only alphabet characters');
            }
            else if(pwd=='')
            {
                alert('Please enter Password');
            }
            else if(cpwd=='')
            {
                alert('Enter Confirm Password');
            }
            else if(!pwd_expression.test(pwd))
            {
                alert ('Upper case, Lower case, Special character and Numeric letter are required in Password filed');
            }
            else if(pwd != cpwd)
            {
                alert ('Password not Matched');
            }
            else if(document.getElementById("t5").value.length < 6)
            {
                alert ('Password minimum length is 6');
            }
            else if(document.getElementById("t5").value.length > 12)
            {
                alert ('Password max length is 12');
            }
            else
            {				                            
                   alert('Thank You for Login & You are Redirecting'); 
                   window.location = "http://4beginner.com"; 
            }
        }

Step 5. Final Step Now save your page with any name with .html extension. Like registration.html After saving the file, open the file by double clicking on it and see your final output.