Skip to main content
registration form validation using javascript

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.

Important for you : Registration Form Validation Using JQuery

Important for you : Registration Form Server Side Validation In PHP

Keep in mind that javascript file is known as *.js file Where .js is extension of javascript file. First create a style.css file. Copy the below style code and paste it in the style.css file.

	.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;
	}

This is a style.css file which gives a style to our registration form.

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

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="main.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 use another one 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.

admin

HI, i am software developer having knowledge of PHP, C, C++ programming languages. I am very passionate about programming and ability to solve the programming problems. CodeandTuts is my blog where i like to put new tutorial and help new developer.

20 thoughts on “Complete Registration Form Validation Using Javascript Code Example

  1. When someone writes an article he/she keeps thee plan of
    a user in his/her mind that how a user can know it.
    Therefore that’s why this paragraph is outstanding. Thanks!

  2. whoah this blog is wonderful i like studying your posts.
    Stay up the great work! You already know, many people are searching round for this info, you can aid them greatly.

  3. Hello everyone, it’s my first pay a quick visit at this
    web site, and paragraph is genuinely fruitful in favor of me, keep up posting such content.

  4. Hi my loved one! I want to say that this article is amazing, great
    written and come with almost all ital infos. I would like to
    ssee more posts like this .

  5. Hi! This post could nnot be written any better!
    Reading this polst reminds me oof mmy good old room mate!
    He aoways kept chatting about this. I woll forward this write-up to
    him. Pretty sure he wiol have a good read. Thaank you for sharing!

  6. Hey there! This is my 1st comment here so I just wanted to give
    a quick shout out and say I really enjoy reading through your posts.

    Can you recommend any other blogs/websites/forums that cover the same topics?

    Thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *