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])(?=.*?[#?!@$%^&*-])/;
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:
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
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
Are you using plain code or WordPress?