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

Nice article
Thanks Zack.
Thanks, it’s very helpful
Hi Bro,
I cannot download your source.
Please check at here your “DOWNLOAD SOURCE” link.
Thanks,
Zack
i could not find config.php.
how i can get this.
Hi ag,
Download the source, extract. You can find all the files.
Zack,
Now all links are working.
Thank you.
thanks for this. i’ll use it on my site
Can I combine with another input field ? I’m a newbie in javascript / AJAX. Because I modified the script but it doesn’t works
please help.
thank you for your share of useful script. Please come to check your ‘working script’ at my web site http://www.indonesianunderground.com but it will launch a new ‘appearance’ in the mid of this month
—
Yes, u can combine.
Can u send me the code with explanation? Then i will try to arrange things in your code…
—
I’ve modified your script and it works now
Hi.
Thanks for the tuto, i find it very useful.
Im starting with js and jquery and i have a dude i hope you can help me.
The “success function data” messages appear always in black, id like add them some color, red for bad mensajes (invalid email and email already exist) and green for “email ok”.
I add the next line in the style:
#emailInfo { margin: 10; color:red;} But the messages always is red, even when the message is “email ok”.
Chan you show me how can i do it?
Thanks and regards.
Thanks,
Change the code like this to get your desired colors…
success: function(data){
if(data == "invalid")
{
emailok = false;
emailInfo.html("<font color=’red’>Inavlid Email</font>");
}
else if(data != "0")
{
emailok = false;
emailInfo.html("<font color=’red’>Email Already Exist</font>");
}
else
{
emailok = true;
emailInfo.html("<font color=’green’>Email OK</font>");
}
}
Thankyou Beski.
please specify just temporary file name like as check.php so give name to all the file which you are consider here for us.
Hi, great tutorial, managed to get it working so far, however this is more of a feature request.
What i would like to be able to do is have my submit button disabled when the page loads, and it only becomes active when emailok = true (Valid Email Address) condition is met.
I’ve tried a few things, but i cant seem to get the submit button to enable it self when a condition is met. If you have any ideas on how i could get this working i would appreciate it very much.
Try this,
HTML:
input type="submit" value="SAVE" name="B1" id="B1" disabled="disbled"Javascript:
emailok = true;$('#B1').attr('disabled','');
thaaaaanks alot
Pingback: 2010 review – Pagination and anchor scroll are most wanted | Beschi's Works
It´s a very nice tip! Can I copy your post, adapt something and publish in my website?
Of course I would write the reference/source!
Yes please…
Thanks.
It is sending me the correct result but it is showing the same Email Already exist on all like on invalid email, or 0 and 1. It is not showing different for different records.
i cannot run this code! There is something wrong .Neither i can download the source ahhhhhhh:(
thank for script
hello,
The download and demo links are down.
Can you please recheck and advise.
Thanks
again your download link was not working , plz watch that
check your DOWNLOAD and DEMO link sir PLEASE…
Links ok now.
Thanks.
thanks for saving my site,now i can use it in my website
can you check again your source code, i’ve download your code and can’t running like demo ver maybe something wrong with it, thx for a respond
your code show only email already exist please check it,,thanks
yeah, something wrong with the code
thanks
Make The Best Of The Excursions making use of These Hints
這篇太好了
我做出來囉!!!
多謝你的程式~~~
When i input new email id at that time also got same msg like “Already exit” . so what changes are required for that…plz let me know asps…
hai i cant able to download ur source code!!!!!!!! so can u help me to download ur source code???
I copied the code, and changed it to my database information, but its not grabbing the email from my database.