Complete Registration Form Validation Using Javascript Code Example

Hello friends, in this tutorial we will learn about complete registration form validation using javascript code. Javascript is client-side scripting language. It is most popular programming language to perform various task at the client side. In this tutorial we will learn registration form validation in javascript. So let’s start.

First create a style.css file. Copy the below style code and paste it in the style file. Style file gives a style to our registration form.

style.css

.form-table
{
	width:400px;
	margin-left: auto;
	margin-right: auto;
}
label{
	font-weight: bold;
}
#form_submission_ajax{
	background-color: #eee;
	padding-top: 10px;
	padding-bottom: 10px;
}

.error{
	color: #ff0000;
}

Now create a validation.js file for javascript code. Copy the below code and paste in it. This is javascript code for validate a registration form data.

validation.js

function phoneNumberValidation(phoneNumber)  
{  
	var phoneno = /^\d{10}$/;  
	if(phoneNumber.match(phoneno))  
	{  
		return true;  
	}  
	else  
	{  
		var div = document.getElementById('phone_error');
		div.innerHTML = "* Enter valid 10 digit number like this 9876543210.";
		return false;
	}  
} 

function validate(){
	var valid = true;
	var f_name = document.getElementById('f_name').value;
	var l_name = document.getElementById('l_name').value;
	var email = document.getElementById('email').value;
	var password = document.getElementById('password').value;
	var retype_password = document.getElementById('re_password').value;
	var gender = document.getElementById('gender').value;
	var language = document.getElementsByClassName('language');
	var checkedData=[];
	var numOfCheckbox = language.length;
	var getCheckboxData; 
	for(i=0; i<numOfCheckbox;i++)
	{
		if(language[i].checked==true)
		{
			checkedData.push(language[i].value);
		}
	}
	var country = document.getElementById('country').value;
	var phone = document.getElementById('phone').value;
	
	if(f_name=='' || f_name==null)
	{
		valid=false;
		var div = document.getElementById('f_name_error'); 
		div.innerHTML = "* Please enter firstname.";
	}
	else
	{
		document.getElementById('f_name_error').innerHTML='';
	}

	if(l_name=='' || l_name==null)
	{
		valid=false;
		var div = document.getElementById('l_name_error');
		div.innerHTML = "* Please enter lastname.";
	}
	else
	{
		document.getElementById('l_name_error').innerHTML='';
	}

	if(email=='' || email==null)
	{
		valid=false;
		var div = document.getElementById('email_error');
		div.innerHTML = "* Please enter email.";
	}
	else
	{
		document.getElementById('email_error').innerHTML='';
	}

	if(password=='' || password==null)
	{
		valid=false;
		var div = document.getElementById('password_error');
		div.innerHTML = "* Please enter password.";
	}
	else
	{
		document.getElementById('password_error').innerHTML='';
	}

	if(retype_password=='' || retype_password==null)
	{
		valid=false;
		var div = document.getElementById('re_password_error');
		div.innerHTML = "* Retype your password here.";
	}
	else
	{
		document.getElementById('re_password_error').innerHTML='';
	}

	if(checkedData=='' || checkedData==null)
	{
		valid=false;
		var div = document.getElementById('language_error');
		div.innerHTML = "* Please choose any language.";
	}
	else
	{
		document.getElementById('language_error').innerHTML='';
	}

	if(country=='' || country==null)
	{
		valid=false;
		var div = document.getElementById('country_error');
		div.innerHTML = "* Please choose your country.";
	}
	else
	{
		document.getElementById('country_error').innerHTML='';
	}

	if(phone=='' || phone==null)
	{
		valid=false;
		var div = document.getElementById('phone_error');
		div.innerHTML = "* Please enter your phone number.";
	}
	else
	{
		document.getElementById('phone_error').innerHTML='';
	}

	if(phone!='')
	{
		valid = phoneNumberValidation(phone);
	}

	if(password!='' && retype_password!='')
	{
		if(password != retype_password)
		{
			valid=false;
			var div = document.getElementById('re_password_error');
			div.innerHTML = "* Password do not match. Please check it.";
		}
		
		if(password == retype_password)
		{
			document.getElementById('re_password_error').innerHTML='';
		}
	}

	if(valid==false)
	{
		return false;
	}
	else
	{
		alert("You form is ready to submit.");
		return true;
	}	
}

Now here is a code for form. Create a new index.php file. Copy the below code and paste it in index.php file.

index.php

<!DOCTYPE html>
<html>
<head>
	<title>Registration form validation using jQuery</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="validation.js"></script>
</head>
<body>
	<h1><center>Registration form validation using jQuery</center></h1>
<form action="" method="post" onsubmit="return validate();" id="form_submission_ajax">
	<table class="form-table">
		<tr>
			<td><label>Firstname:</label></td>
			<td><input type="text" name="f_name" id="f_name">
			</td>
		</tr>
		<tr>
			<td></td>
			<td id="f_name_error" class="error"></td>
		</tr>
		<tr>
			<td><label>Lastname:</label></td>
			<td><input type="text" name="l_name" id="l_name"></td>
		</tr>
		<tr>
			<td></td>
			<td id="l_name_error" class="error"></td>
		</tr>
		<tr>
			<td><label>Email:</label></td>
			<td><input type="email" name="email" id="email"></td>
		</tr>
		<tr>
			<td></td>
			<td id="email_error" class="error"></td>
		</tr>
		<tr>
			<td><label>Password:</label></td>
			<td><input type="password" name="password" id="password"></td>
		</tr>
		<tr>
			<td></td>
			<td id="password_error" class="error"></td>
		</tr>
		<tr>
			<td><label>Retype Password:</label></td>
			<td><input type="password" name="re_password" id="re_password"></td>
		</tr>
		<tr>
			<td></td>
			<td id="re_password_error" class="error"></td>
		</tr>
		<tr>
			<td><label>Gender:</label></td>
			<td><input type="radio" name="gender" id="gender" value="male" checked>Male
				<input type="radio" name="gender" id="gender" value="female">Female
			</td>
		</tr>
		<tr>
			<td></td>
			<td id="gender_error"></td>
		</tr>
		<tr>
			<td><label>Known Language:</label></td>
			<td>
				<input type="checkbox" name="language[]"  class="language" value="hindi">Hindi
				<input type="checkbox" name="language[]"  class="language" value="english">English
				<input type="checkbox" name="language[]"  class="language" value="gujarati">Gujarati
			</td>
		</tr>
		<tr>
			<td></td>
			<td id="language_error" class="error"></td>
		</tr>
		<tr>
			<td><label>Country:</label></td>
			<td>
				<select name="country" id="country">
					<option value="">Select Country</option>
					<option value="IN">India</option>
					<option value="UK">United Kingdom</option>
					<option value="US">United State</option>
				</select>
			</td>
		</tr>
		<tr>
			<td></td>
			<td id="country_error" class="error"></td>
		</tr>
		<tr>
			<td><label>Phone No:</label></td>
			<td><input type="telephone" name="phone" id="phone"></td>
		</tr>
		<tr>
			<td></td>
			<td id="phone_error" class="error"></td>
		</tr>
		<tr>
			<td></td>
			<td><input type="submit" name="submit" value="Submit"></td>
		</tr>
	</form>
</body>
</html>

In the above tutorial we use onSubmit() javascript event to validate form data before submit it. In onSubmit javascript event we use validate function. If validate function return false value then form will not submit otherwise form will submit. Here we have used another function for phone number validation. Using that function you can check phone number like this 0987654321.

I hope that you like this tutorial. Please share it with your friends. If you have any problem regarding this tutorial please let me know in the comment box. Thank you.