Check email already exist – Ajax – Jquery

Posted on May 16, 2009. Filed under: Tutorial | Tags: , |

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 exist
s
}
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

<pre><head>
<title>Check Email Already Exist</title>
<style>
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; }
</style>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="check.js"></script>

</head>
<body>
<div align="left">
<form name="chkForm" id="chkForm" method="post" action="save.php">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="table1">
<tr>
<td width="99">&nbsp;</td>
<td width="154">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="99">Username</td>
<td width="154">
			<input type="text" name="username" id="username" size="20" class="input_s1_normal"></td>
<td>&nbsp;</td>
</tr>
<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>
<tr>
<td width="99">&nbsp;</td>
<td width="154">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="99">&nbsp;</td>
<td width="154">
			<input type="submit" value="SAVE" name="B1" class="button_s1"></td>
<td>&nbsp;</td>
</tr>
</table>
</form></div>
</body>

Javascript

<pre>$(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

<pre><?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 not already exist
}
else
{
	$msg = "invalid";
}
echo $msg;
?>

THE DEMO
DOWNLOAD SOURCE

Make a Comment

Make a Comment: ( 2 so far )

blockquote and a tags work here.

2 Responses to “Check email already exist – Ajax – Jquery”

RSS Feed for Beschi's Works Comments RSS Feed

Nice article :)


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...