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 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

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

About these ads
This entry was posted in Ajax, Jquery, PHP, Tutorial and tagged , . Bookmark the permalink.

55 Responses to Check email already exist – Ajax – Jquery

  1. Zack says:

    Nice article :)

  2. Yuli says:

    Thanks, it’s very helpful :)

  3. Zack says:

    Hi Bro,
    I cannot download your source.
    Please check at here your “DOWNLOAD SOURCE” link.

    Thanks,
    Zack

  4. ag says:

    i could not find config.php.
    how i can get this.

  5. cookery site says:

    thanks for this. i’ll use it on my site

  6. bfirm says:

    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.

    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 :) 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 :)

  7. 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.

    • beski says:

      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>");
      }
      }

  8. aditya says:

    please specify just temporary file name like as check.php so give name to all the file which you are consider here for us.

  9. Daniel says:

    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.

  10. Pingback: 2010 review – Pagination and anchor scroll are most wanted | Beschi's Works

  11. 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!

  12. 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.

  13. beena says:

    i cannot run this code! There is something wrong .Neither i can download the source ahhhhhhh:(

  14. ddart says:

    thank for script :)

  15. Qaysar says:

    hello,

    The download and demo links are down.

    Can you please recheck and advise.

    Thanks

  16. dhinesh says:

    again your download link was not working , plz watch that

  17. AstigCLAN says:

    check your DOWNLOAD and DEMO link sir PLEASE…

  18. hassan says:

    thanks for saving my site,now i can use it in my website :)

  19. Shiro says:

    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

  20. abdullah says:

    your code show only email already exist please check it,,thanks

  21. Make The Best Of The Excursions making use of These Hints

  22. 這篇太好了
    我做出來囉!!!
    多謝你的程式~~~

  23. alps says:

    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…

  24. Dharmendraa says:

    hai i cant able to download ur source code!!!!!!!! so can u help me to download ur source code???

  25. Chris says:

    I copied the code, and changed it to my database information, but its not grabbing the email from my database.

  26. I’m not that much of a online reader to be
    honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your website to come back later. All the best

  27. Akita says:

    not working duno why but all email is
    “Email Already Exist” =.=

    • Mrityunjay says:

      eregi working before PHP 5.3, if u install greater version of php then try this
      filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) in place of eregi

  28. Any Bose 321 GS Collection II: Is it to suit your needs?

  29. Hi,when i enter a single word it displays
    Email Already Exist.

    any help ?

  30. Spencer says:

    I know this if off topic but I’m looking into starting my own weblog and was curious what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very web smart so I’m not 100% sure. Any recommendations or advice would be greatly appreciated.
    Cheers

  31. Gladys says:

    Remarkable things here. I’m very happy to look your article. Thank you so much and I’m taking a look ahead
    to contact you. Will you kindly drop me a e-mail?

  32. Curtis says:

    Excellent post. I was checking constantly this blog and
    I am impressed! Very helpful info specially the last part :) I care for such
    info a lot. I was seeking this particular info for a very long time.
    Thank you and good luck.

  33. I am curious to find out what blog platform you have been using?
    I’m experiencing some minor security problems with my latest website and I would like to find something more secure. Do you have any recommendations?

  34. santosh says:

    Good work

  35. kartik says:

    hey guys…..its realy first time m posting about php…m glad to see all the above threads…so beschi has wrote some useful code for all of us….bt i was getting problem with this code….was not able to run the code…..bt finaly i did some changes and now able to run this script.

  36. kartik says:

    hey alps and akita plz try this code in check.php

    $email1 =$_POST["email"];
    $regex = ‘/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/';
    // Run the preg_match() function on regex against the email address
    if (preg_match($regex, $email1)) {

    $sql = “select * from users where email='”.$email.”‘”;

    ………………………………….further code

    this will work definately

  37. shoaib khan says:

    where is save.php that to which you send the data of index.php

  38. Pat says:

    There are a lot of baby name websites, blogs and books out there,
    but I found this one to be the best. Canadian Website:(click on “coupons and special offers”).
    Visit your local police and fire departments and ask them if
    they offer free car seats.

  39. Hello! I’ve been reading your website for a long time now and finally got the courage to go ahead
    and give you a shout out from Atascocita Texas! Just wanted to mention keep up the good work!

  40. مولاتي says:

    http://www.mawlati.com

    موقع المرأة العربية,مولاتي,موقع مولاتي,موقع المرأة,

  41. Ila says:

    continuously i used to read smaller articles or reviews which also clear their motive, and that is also happening with this post which I am reading at this time.

  42. Hi there! I could have sworn I’ve visited this web site before but after looking at many of
    the posts I realized it’s new to me. Nonetheless, I’m certainly happy I stumbled upon it and I’ll be book-marking it and checking back frequently!

  43. Windy says:

    If a dad possesses herpes but doesn’t find out it, he is able to unknowingly infect
    his feminine partner, and if that occurs late in pregnancy
    , that is clearly a very bad factor. Give Erase Herpes a go today.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s