jQuery Validation on Registration Page

/

In this tutorial, we will learn about how to make “Registration system & jquery validation”. jquery will be used to validate the form with simple steps. we will also learn a bit about database connectivity using PHP.

We have created a simple HTML form with four fields- Name, Email, Password and Confirm Password. There is a jquery function for complete validation and user data get inserted through PHP script.

Before inserting into database, email is also checked into database for its existence, if it exists then, user must enter another email address.

HTML File: Registration.html

Firstly we create HTML page which has four fields Name, Email, Password and Confirm Password. The following is the code of HTML page.

<!DOCTYPE html>
<html>
<head>
<title>Registration Form Using jQuery ‐ Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!‐‐ Include CSS File Here ‐‐>
<link rel="stylesheet" href="css/style.css"/>
<!‐‐ Include JS File Here ‐‐>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.1
1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/registration.js"></sc
ript>
</head>
<body>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<h2>Create Registration Form Using jQuery</h2>
<label>Name :</label>
<input type="text" name="dname" id="name">
<label>Email :</label>
<input type="text" name="demail" id="email">
<label>Password :</label>
<input type="password" name="password" id="password">
<label>Confirm Password :</label>
<input type="password" name="cpassword" id="cpassword">
<input type="button" name="register" id="register" value="Register">
</form>
</div>
</body>
</html>

jQuery file: registration.js

After create HTML page we create a jQuery file named registration.js which performs validation on data that user fill in filelds. The following is the code of jQuery file.

$(document).ready(function(){

$("#register").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var cpassword = $("#cpassword").val();
if( name =='' || email =='' || password =='' || cpassword =='')
{
alert("Please fill all fields...!!!!!!");
}
else if(!(validateEmail(email)))
{
alert('Invalid Email address');
}
else if((password.length)<8)
{
alert("Password should atleast 8 character in length...!!!!!!");
}
else if(password!=cpassword)
{
alert("Your passwords don't match. Try again?");
} 
else 
{
$.post("register.php",{ name1: name, email1: email, password1:password},
function(data) {
if(data=='You have Successfully Registered.....')
{
$("form")[0].reset();
}
alert(data);
});
}
});
});
function validateEmail(email)
{
var filter=/^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
if(filter.test(email))
{
return true;
}
else
{
return false;
}
}

PHP Script: register.php

The following is a PHP script which has database connectivity and data is get inserted into database if data is valid. Before inserting, email is also checked for its existence.

<?php
// Establishing connection with server..
 $connection = mysql_connect("localhost", "root", "");

// Selecting Database 
 $db = mysql_select_db("college", $connection);

//Fetching Values from URL  
$name=$_POST['name1'];
$email=$_POST['email1'];
$password= sha1($_POST['password1']);  // Password Encryption, If you like you can also leave sha1

// check if e-mail address syntax is valid or not

$result = mysql_query("SELECT * FROM registration WHERE email='$email'");
$data = mysql_num_rows($result);
if(($data)==0)
{
//Insert query 
$query = mysql_query("insert into registration(name, email, password) values ('$name','$email', '$password')");
if($query)
{
echo "You have Successfully Registered.....";
}
else
{
echo "Error....!!";   
}
} 
else
{
echo "This email is already registered, Please try another email...";
}  
 
//connection closed
mysql_close ($connection);
?>

CSS File: style.css

The following is CSS file used to design your HTML page to make Registration system & jquery validation.

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Ser
if);
h2{
text‐align: center;
font‐size: 24px;
}
hr{
margin‐bottom: 30px;
}
div.container{
width: 960px;
height: 610px;
margin:50px auto;
font‐family: 'Droid Serif', serif;
position:relative;
}
div.main{
width: 320px;
float:left;
padding: 10px 55px 40px;
background‐color: rgba(187, 255, 184, 0.65);
border: 15px solid white;
box‐shadow: 0 0 10px;
border‐radius: 2px;
font‐size: 13px;
}
input[type=text],[type=password] {
width: 97.7%;
height: 34px;
padding‐left: 5px;
margin‐bottom: 20px;
margin‐top: 8px;
box‐shadow: 0 0 5px #00F5FF;
border: 2px solid #00F5FF;
color: #4f4f4f;
font‐size: 16px;
}
label{
color: #464646;
text‐shadow: 0 1px 0 #fff;
font‐size: 14px;
font‐weight: bold;
}
#register {
font‐size: 20px;
margin‐top: 15px;
background: linear‐gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
padding: 7px 35px;
color: white;
text‐shadow: 0px 1px 0px #13506D;
font‐weight: bold;
border‐radius: 2px;
cursor: pointer;
width: 100%;
}
#register:hover{
background: linear‐gradient(#36caf0 5%, #22abe9 100%)
}

Registration system & jquery validation

The above mentioned topic clears the topic of “Registration system & jquery validation”. If you have any queries, you can ask those in the forum section. This is the link to Forum section