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

muni

11 years ago

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

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>

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 ;}
</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';
	   }

}
?>

Share this: