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