Live Username Availability Checker and Password Strength Indicator With jQuery and Ajax

You would have seen various websites which checks username availability in real time and also tells you strength of your password during registration process. For example take “gmail signup” or twitter sign up process, their registration process is user oriented and very flexible, it tells user everything on run time. This tutorial is intended to create a similar script which will tell username availability and password strength at run time.

For Password strength Indicator we’ll use a jQuery plugin named ‘password Strength (0.1.2)’ developed by Sagie Maoz. To calculate password strength we need to consider different input cases from user and based on those cases we calculate password strength. This plugin gives us the algorithm to calculate password strength all we need to do is call the plugin’s function appropriately.

                     LIVE DEMO DOWNLOAD

Let’s start our simple tutorial, We need a database which will store some usernames, in our case database name is ‘demo’ and table name is ‘registration’.

SQL query to create registration table:

CREATE TABLE IF NOT EXISTS <code>registration</code> (
<code>id</code> int(10) NOT NULL AUTO_INCREMENT,
<code>name</code> varchar(20) NOT NULL,
<code>password</code> varchar(20) NOT NULL,
PRIMARY KEY (<code>id</code>)

Now we need an HTML form (registration form) where user will enter his desired username and password, Our form will be intelligent enough to tell user on run time whether the username is available or not? And it will also tell user the password strength so that user can easily choose a strong and secure password:

Code for index.html:

<!DOCTYPE html >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

<div id="container">

<div id="top"> Live Username Availability Checker and Password Strength Indicator Using Ajax, jQuery- InfoTuts </div>

<div id="wrapper">
<div id="form">

<label>Choose Your Username</label>
<input type="text" autocomplete="off" name="user_name" id="user_id" >
<span  ></span> <br/><br/>
<label>Choose Your Password</label>
<input type="password" autocomplete="off" name="passwd" />
<span class=""></span>

<!-- javascript placed at bottom to make page load faster -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/jquery.password_strength.js"></script>
<script type="text/javascript">
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
$('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');</p>
<p style="text-align: justify;">var String = 'username='+ availname;
type: "POST",
url: "available.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
$('.check').html('<img src="image/accept.png" /> This Username Is Avaliable');
$('.check').html('<img src="image/error.png" /> This Username Is Already Taken');


$('.passwd').password_strength(); // to check password strength

function remove_whitespaces(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;


Using Ajax this form will check if username already exists in database or not using “available.php”.

Code for available.php:

$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "12345";
$mysql_db_database = "demo";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $con) or die("Could not select database");

if(isset($_POST['username']) && !empty($_POST['username'])){
$query="select * from registration where LOWER(name)='$username'";
if($count > 0){
$HTML='user exists';
echo $HTML;


Make your website’s registration process as simple as you can for users. It really irritates user when a message appears “Username not available choose some other username” after they have submitted the form. They need to again fill the same registration form with different username. So it’s better check availability of username at run time and help your users choose a strong password for them. If you liked this post please comment and share this post to help others.

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

13 Responses so far.

  1. Great post. I was checking continuously this blog and I’m impressed! Very helpful info particularly the last part 🙂 I care for such info a lot. I was seeking this certain information for a long time. Thank you and good luck.

  2. Hi,

    Can you do it without using PHP page but implementing the same coding in jsp page with the help of scripting language?

    Thanks in advance!

Comments are closed.