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:
1 | CREATE TABLE IF NOT EXISTS `registration` ( |
2 | `id` int(10) NOT NULL AUTO_INCREMENT, |
3 | `name` varchar(20) NOT NULL, |
4 | `password` varchar(20) NOT NULL, |
6 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; |
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:
4 | <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> |
6 | <link rel= "stylesheet" type= "text/css" href= "css/style.css" /> |
12 | <div id= "top" > Live Username Availability <span id= "IL_AD12" class = "IL_AD" >Checker</span> and Password Strength Indicator Using Ajax, jQuery- InfoTuts </div> |
17 | <label>Choose Your Username</label> |
18 | <input type= "text" autocomplete= "off" name= "user_name" id= "user_id" > |
19 | <span ></span> <br/><br/> |
20 | <label>Choose Your Password</label> |
21 | <input type= "password" autocomplete= "off" name= "passwd" /> |
27 | <!-- javascript placed at bottom to make page load faster --> |
29 | <script type= "text/javascript" src= "js/jquery.password_strength.js" ></script> |
30 | <script type= "text/javascript" > |
33 | $( '.user_name' ).keyup( function () |
35 | var checkname=$(this).val(); |
36 | var availname=remove_whitespaces(checkname); |
39 | $( '.check' ).fadeIn(400).html( '<img src="image/ajax-loading.gif" /> ' );</p> |
40 | <p style= "text-align: justify;" > var String = 'username=' + availname; |
46 | success: function (result){ |
47 | var result=remove_whitespaces(result); |
49 | $( '.check' ).html( '<img src="image/accept.png" /> This Username Is Avaliable' ); |
50 | $( ".check" ).removeClass( "red" ); |
51 | $( '.check' ).addClass( "green" ); |
52 | $( ".user_name" ).removeClass( "yellow" ); |
53 | $( ".user_name" ).addClass( "white" ); |
55 | $( '.check' ).html( '<img src="image/error.png" /> This Username Is Already Taken' ); |
56 | $( ".check" ).removeClass( "green" ); |
57 | $( '.check' ).addClass( "red" ) |
58 | $( ".user_name" ).removeClass( "white" ); |
59 | $( ".user_name" ).addClass( "yellow" ); |
69 | $( '.passwd' ).password_strength(); |
72 | function remove_whitespaces(str){ |
73 | var str=str.replace(/^\s+|\s+$/, '' ); |
Using Ajax this form will check if username already exists in database or not using “available.php”.
Code for available.php:
2 | $mysql_db_hostname = "localhost" ; |
3 | $mysql_db_user = "root" ; |
4 | $mysql_db_password = "12345" ; |
5 | $mysql_db_database = "demo" ; |
7 | $con = mysql_connect( $mysql_db_hostname , $mysql_db_user , $mysql_db_password ) or die ( "Could not connect database" ); |
8 | mysql_select_db( $mysql_db_database , $con ) or die ( "Could not select database" ); |
10 | if (isset( $_POST [ 'username' ]) && ! empty ( $_POST [ 'username' ])){ |
11 | $username = strtolower (mysql_real_escape_string( $_POST [ 'username' ])); |
12 | $query = "select * from registration where LOWER(name)='$username'" ; |
13 | $res =mysql_query( $query ); |
14 | $count =mysql_num_rows( $res ); |
Conclusion:
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.
Hi sanjeev,
Great work done and nice design. Will implement soon in my website. Really great Help. Make dynamic posting tutorial also.
Thank you
[...] http://www.infotuts.com/live-username-availability-checker-and-password-strength-indicator-with-jque… [...]
grate work to help persion
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.
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!
I can’t get this to work – I’m getting a bunch of errors on lines 38, 39, and 40!