Check email availability using jQuery’s ajax (Part 2. easy way)
On our previous tutorial (Part 1), we have deal with hard way of checking email availability using jQuery ajax.
Now we will accomplish the same problem, which is to check email availability without have to reload the page (server side processing).
Here we will solve it using jQuery plugin jQuery validator which is mainly used to validate user form. Inside jQuery validator, we will using its remote feature (the plugin also capable to check wheter the email entered by user is valid or not).
Remote feature allow us to process ajax call then handle its response.
Well then, lets begin.
From our previous tutorial, the page email_checker.php and process.php remain the same without changed. Here they are:
email_checker.php
<?php
$registered_email = array( 'john@doe.com', 'jonhy@doe.com' );
$requested_email = $_GET['email'];
if( in_array($requested_email, $registered_email) ){
echo 'false';
}
else{
echo 'true';
}
?>
process.php
<?php $requested_email = $_POST['email']; echo "<h1>$requested_email</h1> is available !"; ?>
The register page have to modified to this:
register.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<title>Email Checker</title>
<script type="text/javascript">
$(document).ready(function(){
$("form#my_form").validate({
rules: {
email:{
remote:'email_checker.php'
}
},
messages: {
email: {
remote:jQuery.format("Email \"{0}\" have been used.")
}
}
});
});
</script>
</head>
<body>
<form name="my_form" id="my_form" method="post" action="process.php">
<h1>Check email availability</h1>
<input type="text" name="email" id="email" />
<input type="submit" value="Proses" />
</form>
</body>
</html>
We can see that the page need only to set the configuration on how our form will validated.
Lets try.
Then, again you can download complete version of this tutorial.
Dear Friends,
I hope you are doing well. I have launched a web site http://www.codegain.com and it is basically aimed C#,JAVA,VB.NET,ASP.NET,AJAX,Sql Server,Oracle,WPF,WCF and etc resources, programming help, articles, code snippet, video demonstrations and problems solving support. I would like to invite you as an author and a supporter. Looking forward to hearing from you and hope you will join with us soon.
Please forward this email to all of your friends who are related IT. Send to us your feed about site also.
Thank you
RRaveen
Founder CodeGain.com
RRaveen
2009/07/02 at 21:45
Sure, but currently I dont have good “english” capability. Usually I wrote on Bahasa (Indonesia language). This blog aims to improve my skill on that area.
imamiscool
2009/07/03 at 18:19