HTML / JQUERY

Complete Registration Form Validation Using Jquery Example

- by Chintan Panchal - 2 Comments.
registration form validation using jquery

Form validation and security is very important while you are making a webpage. If there is no security in your registration form then anyone can destroy your database. In the previous post we saw that complete registration form validation using javascript. In this tutorial you will learn about complete registration form validation using jQuery code. This tutorial is same as previous tutorial but code length is decrease due to jQuery. So lets start this tutorial.

Please don’t copy the code from here. Try to understand the code and require than do more research or ask me question in comment box.

First create a “style.css” file and copy the below style code and save it.

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 html registration form using below code. Create a index.php file with below code.


index.php


<!DOCTYPE html>
<html>
<head>
<title>Form validation using jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
	<h1><center>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>



The above code is a html registration form. When you click on the submit form button it will check all the field s by jquery. If they are empty then it will through the error code for particular field. Lets check here. takipçi satın al









main.js


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

function validate(){
	var valid = true;
	var f_name = $('#f_name').val();
	var l_name = $('#l_name').val();
	var email = $('#email').val();
	var password = $('#password').val();
	var retype_password = $('#re_password').val();
	var gender = $('#gender').val();

	var checkedData=[];
	$('.language').each(function(i){
		if($(this).is(':checked'))
		{
			checkedData.push($(this).val());
		}
	});

	var country = $('#country').val();;
	var phone = $('#phone').val();;

	if(f_name=='' || f_name==null)
	{
		valid=false;
		$('#f_name_error').html("* Please enter firstname.");
	}
	else
	{
		$('#f_name_error').html("");
	}

	if(l_name=='' || l_name==null)
	{
		valid=false;
		$('#l_name_error').html("* Please enter lastname.");
	}
	else
	{
		$('#l_name_error').html("");
	}

	if(email=='' || email==null)
	{
		valid=false;
		$('#email_error').html("* Please enter email.");
	}
	else
	{
		$('#email_error').html("");
	}

	if(password=='' || password==null)
	{
		valid=false;
		$('#password_error').html("* Please enter password.");
	}
	else
	{
		$('#password_error').html("");
	}

	if(retype_password=='' || retype_password==null)
	{
		valid=false;
		$('#re_password_error').html("* Please enter retype password.");
	}
	else
	{
		$('#re_password_error').html("");
	}

	if(checkedData=='' || checkedData==null)
	{
		valid=false;
		$('#language_error').html("* Please choose any language.");
	}
	else
	{
		$('#language_error').html("");
	}

	if(country=='' || country==null)
	{
		valid=false;
		$('#country_error').html("* Please choose your country.");
	}
	else
	{
		$('#country_error').html("");
	}

	if(phone=='' || phone==null)
	{
		valid=false;
		$('#phone_error').html("* Please enter your phone number.");
	}
	else
	{
		$('#phone_error').html("");
	}

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

	if(password != retype_password)
	{
		valid=false;
		$('#re_password_error').html("* Please retype password same as password.");
	}

	if(password == retype_password)
	{
		$('#re_password_error').html("");
	}	

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



Here in the main.js file, jquery code will check a fields and if found empty then it will through an error code to the particular field. In the main.js code, First we declare “valid” variable as “true”, then check every field by jquery code and if it will not satisfy the condition then we change “valid” variable “false”. Finally we check “valid” variable that if it is true the submit the form or return false to the false.


I hope that this tutorial will help you. If you have any question regarding this tutorial please ask me in the comment box. Please share this tutorial. Thank you vary much 🙂 . If you found any problem in the post please contact me. I will solve that problem as soon as possible.
Related:  File Upload Validation In Javascript

Related Posts

image preview before upload using jQuery php

Preview (Thumbnail) Image before upload using jQuery

registered user's email verification script

PHP – Email Verification Script for Registered User

Dynamically add or remove input fields using jquery

Dynamically Add / Remove Input Fields Using Jquery

About Chintan Panchal

I am web developer having 6+ year of experience of web development. Currently working on laravel and have worked on codeigniter, cakephp, symfony. Thank you :)

View all posts by Chintan Panchal →

2 Comments on “Complete Registration Form Validation Using Jquery Example”

Leave a Reply

Your email address will not be published.

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