Check email already exist – Ajax – Jquery

In a registration form i needed to check whether the email already exist or not.

For this i have tried with jquery ajax, we can use this to check usernames, emails,url names… etc.
THE DEMO
How i did…

HTML
<tr>
<td width=”99″>Email</td>
<td width=”154″>
<input type=”text” name=”email” id=”email” size=”20″ class=”input_s1_normal”></td>
<td>
<div id=”emailInfo” align=”left”></div>
</td>
</tr>

Script
First declare a flag variable and other necessary variables
var emailok = false;
var email = $(“#email”);

Send Ajax request to check.php
email.blur(function(){
$.ajax({
type: “POST”,
data: “email=”+$(this).attr(“value”),
url: “check.php”,
beforeSend: function(){
emailInfo.html(“Checking Email…”); //show checking or loading image
},
success: function(data){
if(data == “invalid”)
{
emailok = false;
emailInfo.html(“Inavlid Email”);
}
else if(data != “0”)
{
emailok = false;
emailInfo.html(“Email Already Exist”);
}
else
{
emailok = true;
emailInfo.html(“Email OK”);
}
}
});
});

PHP
This is the check.php file
<?php
//data connection file
require “config.php”;
extract($_REQUEST);

if(eregi(“^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$”, $email))
{
$sql = “select * from users where email=’$email'”;
$rsd = mysql_query($sql);
$msg = mysql_num_rows($rsd); //returns 0 if email not already exists
}
else
{
$msg = “invalid”;
}
echo $msg;
?>

Script
Process the response
email.blur(function(){
$.ajax({
type: “POST”,
data: “email=”+$(this).attr(“value”),
url: “check.php”,
beforeSend: function(){
emailInfo.html(“Checking Email…”);
},
success: function(data){
if(data == “invalid”)
{
emailok = false;
emailInfo.html(“Inavlid Email”);
}
else if(data != “0”)
{
emailok = false;
emailInfo.html(“Email Already Exist”);
}
else
{
emailok = true;
emailInfo.html(“Email OK”);
}
}
});
});

After adding some form effects and validations referred from these links….
http://yensdesign.com/2009/01/improving-search-boxes-with-jquery/
http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/
the complete code  looks like this…
HTML

Check Email Already Exist

body { margin: 0; padding: 0; font-family:Verdana; font-size:10px }
td	 { padding: 2px; font-family:Verdana; font-size:10px }
.input_s1_normal   { width: 150; height: 15; font-family: Verdana; font-size: 10px; border: 1px solid black; }
.input_s1_focus    { background: #efefef; }
.button_s1   { font-family: Verdana; font-size: 10px; font-weight: bold; border: 1px solid black; }</pre>
<div align="left"><form action="save.php" method="post" name="chkForm">
<table id="table1" width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="99"></td>
<td width="154"></td>
<td></td>
</tr>
<tr>
<td width="99">Username</td>
<td width="154"></td>
<td></td>
</tr>
<tr>
<td width="99">Email</td>
<td width="154"></td>
<td></td>
</tr>
<tr>
<td width="99"></td>
<td width="154"></td>
<td></td>
</tr>
<tr>
<td width="99"></td>
<td width="154"></td>
<td></td>
</tr>
</tbody>
</table>
</form></div>
<pre>

Javascript

$(document).ready(function(){
	var emailok = false;
	var boxes = $(".input_s1_normal");
	var myForm = $("#chkForm"), username = $("#username"), email = $("#email"), emailInfo = $("#emailInfo");

	//give some effect on focus
	boxes.focus(function(){
		$(this).addClass("input_s1_focus");
	});
	//reset on blur
	boxes.blur(function(){
		$(this).removeClass("input_s1_focus");
	});

	//Form Validation
	myForm.submit(function(){
		if(username.attr("value") == "")
		{
			alert("Enter Username");
			username.focus();
			return false;
		}
		if(email.attr("value") == "")
		{
			alert("Enter Email");
			email.focus();
			return false;
		}
		if(!emailok)
		{
			alert("Check Email");
			email.attr("value","");
			email.focus();
			return false;
		}
	});

	//send ajax request to check email
	email.blur(function(){
		$.ajax({
			type: "POST",
			data: "email="+$(this).attr("value"),
			url: "check.php",
			beforeSend: function(){
				emailInfo.html("Checking Email...");
			},
			success: function(data){
				if(data == "invalid")
				{
					emailok = false;
					emailInfo.html("Inavlid Email");
				}
				else if(data != "0")
				{
					emailok = false;
					emailInfo.html("Email Already Exist");
				}
				else
				{
					emailok = true;
					emailInfo.html("Email OK");
				}
			}
		});
	});
});

PHP

THE DEMO
DOWNLOAD SOURCE