Live Username and Email Availability Checking using PHP, jQuery and Ajax

  May 20, 2013   by:  muni   2 Comments

In this tutorial we are going to see how to check user name and email availability using PHP, jQuery and Ajax. This task is easily done with the help of jQuery validation plugin remote() method.

When user enters their name or email in the textbox, remote() method of jQuery validation plugin will send the entered value to the backend (PHP File). PHP file compares the entered user name or email with user name or email in the database. If user name or email already exists in the database then it will return ‘false’ string as response. If user name or email not exists¬†already in the database then it will return ‘true’ string as response.

check unique Username and Email Availability using PHP, jQuery and Ajax

Check unique Username and Email Availability using PHP, jQuery and Ajax

check unique Username and Email Availability using PHP, jQuery and Ajax Demo

Demo

Step 1:

Create index.php file and add following html code in it.

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery Validation Plugin Remote Method Example</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js'></script>
</head>
<body>
<p>jQuery Validation Plugin Remote Method Example</p>
<div class='main'>
<form id='mailForm' method='post' action='index.php'>
	<table>
		 <tr>
			<td><input type="text" id="username" name="username" class='txt' placeholder='User Name'/></td>
			<td class="status"></td>
		 </tr>
		 <tr>
			<td><input type="text" id="email" name="email" class='txt' placeholder='Your Email'/></td>
			<td class="status"></td>
		 </tr>
		 <tr>
			<td colspan='2'>
				<input type='submit' name='submit' value='submit' class='but'/>
			</td>
		 </tr>
	</table>
</form>
</div>
</body>
</html>

 

how to check unique Username and Email Availability using PHP, jQuery and Ajax

Download

Step 2:

Now add following css style in the head of the html file.

<style>
.error{color:red;}
.main{width:500px; margin:0px auto;}
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:270px;border:1px solid #00BB64;height:30px;border-radius:3px;color:#00BB64;margin-bottom:5px;}
p{font-family: Lobster;font-size:35px;text-align:center;}
.but{width:270px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
em.error {background:url("unchecked.gif") no-repeat 0px 0px;padding-left: 16px;color: #ff0000;font-weight: bold;}
em.success {background:url("checked.gif") no-repeat 0px 0px;padding-left: 16px;color: #33ff55 !important;}
</style>

Step 3:

Create dummy table using the following SQL query.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

then insert some dummy data’s into the table using following SQL query.

INSERT INTO `users` (`id`, `username`, `email`) VALUES
(1, 'muni', 'muni2explore@gmail.com'),
(2, 'sasi', 'sasi@gmail.com');

Step 4:

Create config.php file to database connection information separtely.

<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'test');
define('DB_USER','root');
define('DB_PASSWORD','');

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());

?>

Step 5:

Now add the following jQuery validation script to add validation to user name email fields in the html form.

<script>
   $('document').ready(function(){
       $("#mailForm").validate({
			     rules: {
					username: {
					   required: true,
					   minlength : 3,
					   remote: "ajax_unique.php?data=name"
					},
					email:{ 
					   required: true,
					   email: true,
					   remote: "ajax_unique.php?data=email"
					}
			     },
			     messages: {
						username: {
						   required:"Please enter your name",
						   minlength: "Please enter a minimun 3 chars",
						   remote: "Username is already exists"
						},
						email:{ 
						   required: "Please enter your email",
						   email: "Please enter a valid email address",
						   remote: "Email is already exists"
						}
			     },
				 debug: true,
				 errorElement: "em",
				 errorContainer: $("#warning, #summary"),
				 errorPlacement: function(error, element) {
					error.appendTo( element.parent("td").next("td") );
				 },
				 success: function(label) {
					label.text("ok!").addClass("success");
				 }	
		});		 
   });

</script>

where remote() will call ajax_unique.php and send user entered information to PHP file during blur() jQuery event.

Step 6:

Here is PHP script that will receive ajax request and compares the users entered information with values in the database. Finally it sends response as ‘true’¬† or ‘false’ string.

<?php
require_once 'config.php';

if($_GET['data']=='name'){
   $value=unique_name($_GET['username']);
}

if($_GET['data']=='email'){
   $value=unique_email($_GET['email']);
}

function unique_name($name=''){
	  $query="select count(musician_name) from user where musician_name='$name'";
	   $response=mysql_query($query);
	   $result=mysql_fetch_array($response);
	   if($result[0]>0){
		  echo 'false';
	   }
	   else{
		 echo 'true';
	   }

}	
function unique_email($email=''){
	  $query="select count(email) from user where email='$email'";
	   $response=mysql_query($query);
	   $result=mysql_fetch_array($response);
	   if($result[0]>0){
		  echo 'false';
	   }
	   else{
		 echo 'true';
	   }

}
?>
  • http://www.presentationsunplugged.com/blog/?p=14682&cpage=1 http://Www.Presentationsunplugged.com/

    This is my first time visit at here and i am
    actually impressed to read everthing at one place.

  • http://www.seoval.com/profiles/blogs/looking-for-web-design-help-try-these-ideas designers

    I believe everything published was very logical. But, what about this?
    what if you added a little content? I am not saying your information isn’t solid., however what if you added a
    headline that grabbed a person’s attention? I mean Live Usernjame and Email
    Availability Checking using PHP, jQuery and AjaxSmart Tutorials – PHP, MySQL, Jquery,
    JavaScript is kinda vanilla. You could peek at Yahoo’s home page and see how they create article headlines to get viewers to click.

    You might add a video or a related picture
    or two to grab readers excited about what you’ve got to
    say. Just my opinion, it might make your blog a little livelier.