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

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.

<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.

#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.

         <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!!

Recently Published

»

Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...

»

Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...

»

Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...

»

Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...

»

Know-How DevOps Benefits Your Business

The organizations in this current fast-paced environment need to ...

»

10 Best Prototyping Tools for UI/UX Designers

Website design for a client gets only successful if you follow their ...

»

Social Media Marketing: Strategy To Boost Ecommerce-Traffic

According to a recent study, the experts revealed that people aged ...