Validation in JavaScript for Registration form | HTML example code

Registration form is used in many places, like customers for subscriptions, services, or other programs or plans. You can create a Registration form using HTML and Validate user input data of fields by using JavaScript.

Must Read: Student registration form in HTML with JavaScript validation

Most common example Gmail or other social media online registration.

It is is a list of fields that a user will input data into and submit to a company or individual.

Validation in JavaScript for Registration form Example

In the example we have 5 input fields:-

  • Name
  • Email id
  • Username
  • Passwords
  • Confirm password

These all fields are created with basic HTML code.

Now coming to form validation in JavaScript using a regular expression, We will create JavaScript functions (one for each input field) that check whether a value submitted by the user passes the validation.

It show alert message until the user supplies a valid value.

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

  <script type="text/javascript">
       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])(?=.*?[#[email protected]$%^&*-])/;
        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 Registration & You are Redirecting to Website');
               // Redirecting to other page or webste code. 
               window.location = "https://tutorial.eyehunts.com//"; 
        }
    }
  </script>
  </head>

    <body>
    <!-- Main div code -->
    <div id="main">
    <div class="h-tag">
    <h2>Register Your Account</h2>
    </div>
    <!-- create account 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>
    <!-- create account box ending here.. -->
    </div>
    <!-- Main div ending here... -->
    </body>
    </html>

Output:

Validation in JavaScript for Registration form Example

Note: We are not using CSS for design, you can do it by yourself.

Do comment if you have any doubts and suggestion on this tutorial code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


2 thoughts on “Validation in JavaScript for Registration form | HTML example code

  1. namaste Rohit

    I will use your contact form validation on my web site.
    would you guide me or send a simple JavaScript code how to send those entries by user then to my email address in the most simple way (without uplets, special modules, browser ads on…)

    mera shubhkamneya aap ke sath hain
    Ram Chetan

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.