How to: Create Simple and Clean password strength checker using jquery and css.

On 03.10.10, In CSS, How to, jQuery

Jquery is very clean and easy to integrate in web applications. To create password strength checker with jquery is simple and can be done easily. Recently , in my latest project , I have used it and liked the way it changes color.

.

Here is the DEMO

Step 1: HTML Setup

Copy the following code inside your body tag or where ever you need this checker.

1
2
3
4
5

<div id="single_form_element">
	<label class="label" for="new_pass">Password</label>
	<input type="password" name="password" value="" class="password-box"/>
	<div class="chk_avlblty chk_pswd"><span class="password-strength"></span> <span class="strength-text">Type Password</span></div>
</div>

.

Step 2: CSS Setup

Copy the following CSS code inside your stylesheet. You can change style as per your requirements.

1
2
3
4
5

#single_form_element{margin-top:50px;}
#single_form_element .chk_avlblty{margin: 10px 0 0 110px;width:110px;text-align:right;}
#single_form_element .strength-text{font-size:13px;font-weight:bold;}
#single_form_element .chk_avlblty span.password-strength{width:110px;-moz-border-radius:5px;-webkit-border-radius:5px;height:10px;background-color:#555;display:block;}
#single_form_element .chk_avlblty span.client-avail{display:block;}

.

Step 3: Javascript setup

Copy the following code inside your head tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="/demos/js/passwordstrength.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$( 'input.password-box' ).live( 'keyup', function() {
			var howStrong = passwordStrength( $( this ).val() );
			$( '.strength-text', $( this ).next() ).text( howStrong );
			var sColor = '#555';
			switch( howStrong ) {
				case 'Strong' :
					$( '.password-strength', $( this ).next() ).css( 'background-color', 'green' );
					break;
				case 'Medium' :
					$( '.password-strength', $( this ).next() ).css( 'background-color', 'lightgreen' );
					break;
				case 'Weak' :
					$( '.password-strength', $( this ).next() ).css( 'background-color', 'orange' );
					break;
				case 'Short' :
					$( '.password-strength', $( this ).next() ).css( 'background-color', 'red' );
					break;
				default :
					$( '.password-strength', $( this ).next() ).css( 'background-color', '#555' );
			}
			}).focusout( function() {
				$( this ).trigger( 'keyup' );
			});
 
	});
 
</script>

All Done!

Check how it Looks. DEMO

Cheers!!

Sign up for 70-401 online training and pass 000-025 exam on first attempt. We provide best quality 642-262 study material with 100% success guarantee.

Steve

Steve is the Founder and Editor-in-chief of Web Developer Juice. He's web developer with 4 years of experience in CSS, HTML, PHP and javascript. If you’d like to connect with him, point to the contact page and follow him on Twitter: @wdjuice.

Visit Website

Comments

Fan
03.10.10

Steve.

This is great.

Yours,
Fan

Andrea
03.10.10

It looks like there’s no way to get a “Strong” password… any example?

rossy
03.10.10

Your Comments it seems difficult . here i came across this one , get tips from else where :http://www.password-genius.com/tips/tips-steps-to-create-perfect-strong-password.html

badge games
03.10.10

Thanks for article. I like it

ecommerce host
03.10.10

the sticky notes tool is amazing. i was going to try and write something almost the same but this is way better. now only if i can ajax out the data to mysql that would rule. i want to have a user pick from a list or projects and get previous post projects and as they add/edit posts save to db. if anyone has some example functions for this – please send me a note, thanks

Handmade Jewelry
03.10.10

jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Essentially, the best parts from both of these query languages were taken, combined, and used to create the final jQuery expression language. If you already know CSS (which most web developers do) then you’re going to be fine.

i want to have a user pick from a list or projects and get previous post projects and as they add/edit posts save to db.

if anyone has some example functions for this – please send me a note, thanks a lot.

iPad jailbreak
03.10.10

If you already know CSS (which most web developers do) then you’re going to be fine.

iPad jailbreak
03.10.10

i want to have a user pick from a list or projects

only if i can ajax out the data to mysql that would rule.

the demo version is good and time saving also..thank you for sharing..

I agree, is a great tutorial and everything was explained so well, I enjoyed every bit of it and I’ve bookmarked to check out new things to visit the blog for good

HGH
03.10.10

Jquery with HTML and CSS code is the best combination…and giving speed to work..

Resumes
03.10.10

coding combination between jquery and css is difficult and thanks for telling us..

Your Name
03.10.10

I can,t understand about the CSS and HTML combination of codes that appear here. The briefing is not given here which made these code difficult.

Thanks for all the tips, they will come in very handy

cosplay
03.10.10

the sticky notes tool is amazing. i was going to try and write something almost the same but this is way better. now only if i can ajax out the data to mysql that would rule. i want to have a user pick from a list or projects and get previous post projects and as they add/edit posts save to db. if anyone has some example functions for this – please send me a note, thanks

Thanks yo developers, you rock, thanks for providing the article

Display Stands
03.10.10

hanks for Sharing This Grateful and helpful post,You share Fabulous Post,Great Man Keep Posting.

I tried it but i can’ make it doesn’t know why! but will try again.

If i can ajax out the data to mysql that would rule. i want to have a user pick from a list or projects and get previous post projects and as they add/edit posts save to db.

merchant account
03.10.10

The software introduced by the Java script is introduced the new functions which made my work easy about the project.

If you already know CSS (which most web developers do) then you’re going to be fine.

Personally I’d have to say that I agree, it’s obvious that you know what you are talking about.I’ll be sharing this with Digg, it’s something that’s gotta be Dugg for sure.I’m thinking this is the best post I’ve read on your blog yet.I’ll check back often, I’m glad I came across your site.

video slots
03.10.10

i want to have a user pick from a list or projects and get previous post projects and as they add/edit posts save to db.

thanks for giving the combination between css and jquery..I like the article very much. Keep updating with such interesting content, so that i can read more from you.

internet fax
03.10.10

Nice code information is given in this post. i really inspired with this code information of java script. Thanks for given this nice information

tiffany
03.10.10

good idea mate. keep it going

800 numbers
03.10.10

Brilliant!! Fantastic tips are given in this post to make your password clean and simple. i like these tips. i am inspired with this post. thanks for sharing knowledge…

scrubs
03.10.10

I agree with the web developer that there idea is nice to made simple software to check the passwords.

diving gear
03.10.10

Very well explained. The instruction was very easy and clear. Thanks for sharing

Definitely agree with what you stated. Your explanation was certainly the easiest to understand. I tell you, I usually get irked when folks discuss issues that they plainly do not know about.

bed in a bag
03.10.10

thanks for sharing this thing, it helped me a lot.

The amazing pix are looking nice I like to see it.

Your CommentsThe software introduced by the Java script is introduced the new functions which made my work easy about the project.

Your CommentsI can,t understand about the CSS and HTML combination of codes that appear here. The briefing is not given here which made these code difficult.

wonderful Tips!!
To make your Computer Password Easy and Clean. After reading this article my many doubts are clear.

Great Post!!
I like this Java Program coding. You solve my Problem. I am very impressed with your work. I use this Programing and make my Password safe and Easy.

file renamer
03.10.10

I appreciate your sharing… I like the java programing code….Thanks for the sharing…..

Thanks for sharing about jquery and css… you reduce my one day effort..

iphone sale
03.10.10

Nice site. good job.

this is an interesting post.

Great work you have done by sharing them to all. simply superb. Thanks for a nice share you have given to us with such an large collection of information

learn languages
03.10.10

It is imperative that we read blog post very carefully. I am already done it and find that this post is really amazing. This is really a nice and informative, containing all information and also has a great impact on the new technology. Thanks for sharing it.

learn languages
03.10.10

I definitely like this blog, It is constantly great when you are able to not just be knowledgeable, but additionally get entertain, from these sort of weblog, that is such a great show, seriously enjoying to watch this, great entry. Many thanks and regards. Thanks

I am happy to find this post very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing.

Son Soifer
03.10.10

Anyway, I’m questioning whether or not you could be open for link exchange, as I hope that we are capable of agree on a mutual hyperlink exchange agreement. Hope to hear a positive reply from you, and have a fantastic day!