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!!
Comments
Steve.
This is great.
Yours,
Fan
It looks like there’s no way to get a “Strong” password… any example?
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
Thanks for article. I like it
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
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.
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
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
Jquery with HTML and CSS code is the best combination…and giving speed to work..
coding combination between jquery and css is difficult and thanks for telling us..
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
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
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.
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.