This tutorial will explain you about live username availability checking using ajax and PHP and about the live password strength indicator. You can see this logic in many websites during signup example Google and Twitter. As the same here this tutorial will explain you about those. Means if I am entering the username or email it will suggest me the availability whether the username is available or not. So that user will let to know the availability before form getting submits. So in this tutorial we will make an Ajax username availability checker with help of jQuery. So here we are going to use Ajax, jQuery, PHP and MySql. Let’s start.

live-username-availability-checking-using-ajax

Step 1 Connect to the Database:

<?php
mysql_connect("localhost", "root", "") or die ("Oops! Server not connected"); // Connect to the host
mysql_select_db("demo") or die ("Oops! DB not connected"); // select the database
?>

Step 2 Create register.php:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live username availability checking using Ajax jQuery PHP and password strength indicator</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#username').keyup(function(){ // Keyup function for check the user action in input
		var Username = $(this).val(); // Get the username textbox using $(this) or you can use directly $('#username')
		var UsernameAvailResult = $('#username_avail_result'); // Get the ID of the result where we gonna display the results
		if(Username.length > 2) { // check if greater than 2 (minimum 3)
			UsernameAvailResult.html('Loading..'); // Preloader, use can use loading animation here
			var UrlToPass = 'action=username_availability&username='+Username;
			$.ajax({ // Send the username val to another checker.php using Ajax in POST menthod
			type : 'POST',
			data : UrlToPass,
			url  : 'checker.php',
			success: function(responseText){ // Get the result and asign to each cases
				if(responseText == 0){
					UsernameAvailResult.html('<span class="success">Username name available</span>');
				}
				else if(responseText > 0){
					UsernameAvailResult.html('<span class="error">Username already taken</span>');
				}
				else{
					alert('Problem with sql query');
				}
			}
			});
		}else{
			UsernameAvailResult.html('Enter atleast 3 characters');
		}
		if(Username.length == 0) {
			UsernameAvailResult.html('');
		}
	});
	
	$('#password, #username').keydown(function(e) { // Dont allow users to enter spaces for their username and passwords
		if (e.which == 32) {
			return false;
  		}
	});
	$('#password').keyup(function() { // As same using keyup function for get user action in input
		var PasswordLength = $(this).val().length; // Get the password input using $(this)
		var PasswordStrength = $('#password_strength'); // Get the id of the password indicator display area
		
		if(PasswordLength <= 0) { // Check is less than 0
			PasswordStrength.html(''); // Empty the HTML
			PasswordStrength.removeClass('normal weak strong verystrong'); //Remove all the indicator classes
		}
		if(PasswordLength > 0 && PasswordLength < 4) { // If string length less than 4 add 'weak' class
			PasswordStrength.html('weak');
			PasswordStrength.removeClass('normal strong verystrong').addClass('weak');
		}
		if(PasswordLength > 4 && PasswordLength < 8) { // If string length greater than 4 and less than 8 add 'normal' class
			PasswordStrength.html('Normal');
			PasswordStrength.removeClass('weak strong verystrong').addClass('normal');			
		}	
		if(PasswordLength >= 8 && PasswordLength < 12) { // If string length greater than 8 and less than 12 add 'strong' class
			PasswordStrength.html('Strong');
			PasswordStrength.removeClass('weak normal verystrong').addClass('strong');
		}
		if(PasswordLength >= 12) { // If string length greater than 12 add 'verystrong' class
			PasswordStrength.html('Very Strong');
			PasswordStrength.removeClass('weak normal strong').addClass('verystrong');
		}
	});
});
</script>
<style type="text/css">
body{
	margin: 0;
	padding: 0;
	font-family: arial;
	color: #2C2C2C;
	font-size: 14px;
}
h1 a{
	color:#2C2C2C;
	text-decoration:none;
}
h1 a:hover{
	text-decoration:underline;
}
.as_wrapper{
	margin: 0 auto;
	width: 1000px;
}
.mytable{
	margin: 0 auto;
	padding: 20px;
	border:2px dashed #17A3F7;
}
.success{
	color:#009900;
}
.error{
	color:#F33C21;
}
.talign_right{
	text-align:right;
}
.username_avail_result{
	display:block;
	width:180px;
}
.password_strength {
	display:block;
	width:180px;
	padding:3px;
	text-align:center;
	color:#333;
	font-size:12px;
	backface-visibility:#FFF;
	font-weight:bold;
}
/* Password strength indicator classes weak, normal, strong, verystrong*/
.password_strength.weak{
	background:#e84c3d;
}
.password_strength.normal{
	background:#f1c40f;
}
.password_strength.strong{
	background:#27ae61;
}
.password_strength.verystrong{
	background:#2dcc70;
	color:#FFF;
}
</style>
</head>

<body>
<div class="as_wrapper">
	<h1><a href="?">Live username availability checking using Ajax jQuery PHP and password strength indicator</a></h1>
    Already exist usernames are superuser, metauser, googler, asif18. Type any other names exclude these username to get 'Available' result.
    <br/><br/>
	<table class="mytable">
    <tr>
    	<td class="talign_right">Username</td>
        <td><input type="text" name="username" id="username" /></td>
        <td><div class="username_avail_result" id="username_avail_result"></div></td>
    </tr>
    <tr>
    	<td class="talign_right">Password</td>
        <td><input type="text" name="password" id="password" /></td>
        <td><div class="password_strength" id="password_strength"></div></td>
    </tr>
    </table>
</div>
</body>
</html>

Paste the above code in register.php file. This page will be the registration page where we applied live username availability and password strength indicator. The above snippet will send the username to another php page. That is the page behind this live username availability checker. Lets see that page too.

Step 3 create checker.php:

This is the page behinds this live username availability checker.

<?php
include 'library.php'; // include the library for database connection
if(isset($_POST['action']) && $_POST['action'] == 'username_availability'){ // Check for the username posted
	$username 		= htmlentities($_POST['username']); // Get the username values
	$check_query	= mysql_query('SELECT username FROM users WHERE username = "'.$username.'" '); // Check the database
	echo mysql_num_rows($check_query); // echo the num or rows 0 or greater than 0
}
?>

Paste the above code in checker.php. Include the Database connection in this page. Simple, register.php file will send the username to this page, and that value will be checked in database. If the value exists in the DB it shows an already exists message. Simple but powerful.

Logically, if username exists checker.php will return a value greater than 0 otherwise 0. So that, we can show the username availability. In password strength indicator it will be calculated by the password field value entering by user. It will show the result depending on user passwords string length.

Download the complete source below.

Post a comment



Mohamed Asif Am a web developer i love web designing, web developing. for any tutorials mail me at asif18[at]asif18.com