Saturday 28 December 2013

live-username-availability-checker-and-password-strength-indicator-with-jquery-and-ajax

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:

1CREATE 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,
5PRIMARY KEY (`id`)
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:

1<!DOCTYPE html >
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 
6<link rel="stylesheet" type="text/css" href="css/style.css" />
7 
8</head>
9<body>
10<div id="container">
11 
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>
13 
14<div id="wrapper">
15<div id="form">
16 
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" />
22<span class=""></span>
23 
24</div>
25</div>
26</div>
27<!-- javascript placed at bottom to make page load faster -->
28<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
29<script type="text/javascript" src="js/jquery.password_strength.js"></script>
30<script type="text/javascript">
31$(function()
32{
33$('.user_name').keyup(function()
34{
35var checkname=$(this).val();
36var availname=remove_whitespaces(checkname);
37if(availname!=''){
38$('.check').show();
39$('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');</p>
40<p style="text-align: justify;">var String = 'username='+ availname;
41$.ajax({
42type: "POST",
43url: "available.php",
44data: String,
45cache: false,
46success: function(result){
47var result=remove_whitespaces(result);
48if(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");
54}else{
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");
60}
61}
62});
63}else{
64$('.check').html('');
65 
66}
67});
68 
69$('.passwd').password_strength(); // to check password strength
70});
71 
72function remove_whitespaces(str){
73var str=str.replace(/^\s+|\s+$/,'');
74return str;
75}
76</script>
77 
78</body>
79</html>

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

Code for available.php:

1<?php
2$mysql_db_hostname = "localhost";
3$mysql_db_user = "root";
4$mysql_db_password = "12345";
5$mysql_db_database = "demo";
6 
7$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or die("Could not connect database");
8mysql_select_db($mysql_db_database, $con) or die("Could not select database");
9 
10if(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);
15$HTML='';
16if($count > 0){
17$HTML='user exists';
18}else{
19$HTML='';
20}
21echo $HTML;
22}
23?>

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.

Post Tagged with , ,

  • Working at home
  • Home Work
  • Work in home
  • At home work
  • Registration Form
  • Verification
  • My Website
  • Security Systems
7 Responses so far.

  1. Hi sanjeev,
    Great work done and nice design. Will implement soon in my website. Really great Help. Make dynamic posting tutorial also.

  2. subash says:

    grate work to help persion

  3. Jolene says:

    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.

  4. Praveen says:

    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!

  5. Kathy says:

    I can’t get this to work – I’m getting a bunch of errors on lines 38, 39, and 40!


About sanjeev

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

1 comment:

  1. Purchasetheme is one kind of platform for the developers and designers. Whoever feels important can buy and sell the readymade work related to web development assets and print comprising scripts, codes, themes, banners, logos, graphics, plugins as well as mobile or desktop app source codes. Ajax Search Opencart

    ReplyDelete