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
<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"> </td>
<td width="154"> </td>
<td> </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> </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"> </td>
<td width="154"> </td>
<td> </td>
</tr>
<tr>
<td width="99"> </td>
<td width="154">
<input type="submit" value="SAVE" name="B1" class="button_s1"></td>
<td> </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;
?>
Nice article
Zack
October 12, 2009
Thanks Zack.
beski
October 14, 2009
Thanks, it’s very helpful
Yuli
December 20, 2009
Hi Bro,
I cannot download your source.
Please check at here your “DOWNLOAD SOURCE” link.
Thanks,
Zack
Zack
January 5, 2010
i could not find config.php.
how i can get this.
ag
January 27, 2010
Hi ag,
Download the source, extract. You can find all the files.
Zack,
Now all links are working.
Thank you.
beski
January 28, 2010