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

Posted by & filed under CSS, HTML5, JQUERY, PHP.

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


Step 1:

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

<title>jQuery Validation Plugin Remote Method Example</title>
<script src=''></script>
<script src=''></script>
<p>jQuery Validation Plugin Remote Method Example</p>
<div class='main'>
<form id='mailForm' method='post' action='index.php'>
			<td><input type="text" id="username" name="username" class='txt' placeholder='User Name'/></td>
			<td class="status"></td>
			<td><input type="text" id="email" name="email" class='txt' placeholder='Your Email'/></td>
			<td class="status"></td>
			<td colspan='2'>
				<input type='submit' name='submit' value='submit' class='but'/>


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


Step 2:

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

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

Step 3:

Create dummy table using the following SQL query.

  `username` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)

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

INSERT INTO `users` (`id`, `username`, `email`) VALUES
(1, 'muni', ''),
(2, 'sasi', '');

Step 4:

Create config.php file to database connection information separtely.

define('DB_HOST', 'localhost');
define('DB_NAME', 'test');

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

			     rules: {
					username: {
					   required: true,
					   minlength : 3,
					   remote: "ajax_unique.php?data=name"
					   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"
						   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) {


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.

require_once 'config.php';



function unique_name($name=''){
	  $query="select count(musician_name) from user where musician_name='$name'";
		  echo 'false';
		 echo 'true';

function unique_email($email=''){
	  $query="select count(email) from user where email='$email'";
		  echo 'false';
		 echo 'true';


Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.


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

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

Get Instant Script Download Access!

hd sex videos tubevaporn tellyporn thatpornpage youvideoporno free porn movies heresyouporn girlpornmovies dzsexy onlinepornteens