In this post I want to talk about how to implement two different scripts and optimize them for one form registration script. The two scripts are Password Strength Meter (jQuery plugin) and gauge.js.

Password Strength Meter is a jQuery plugin made by Firas Kaseem . It helps you know how strong your password is by using certain algorithm to decide score of a password.

Gauge.js is a script made by netzgesta.de in order to help you make a gauge with shading and reflection on your website or web application. Those two scripts can run on modern browsers such as Firefox, Safari, Opera, Chrome and IE.

Implementation

Just like what we have discussed before, I tried to implement those two scripts. The case is I need a password strength meter, but the information is given not in the text of “strong” or “weak” but in a beatiful gauge.

The technic is very simple; Password Strength Meter does the score calculation of a password the user typed and gauge.js shows how strong the password based on that calculation.

Firstly, we make a simple html form and modify the output using CSS, after the output is ready, we make the javascript for the implementation of the concept above. Take a look at the following script:

HTML

<div id="container">
	<div class="the-input">
		<label class="username-label">Type Username</label><input type="text" class="username" />
		<label class="password-label">Type Password</label><input type="password" class="password" />
	</div>
	<div id="gauge"></div>
	<span class="back">
		<a href="">&laquo Back to article</a>
	</span>
</div>

JavaScript

$(document).ready(function() {
 
	$('.username').focus(function() {
 
		$('.username-label').animate({ opacity: "0" }, "fast");
 
			if($(this).val() == "Type Username") {
				$(this).val() == "";
			}
	}).blur(function() {
 
		if($(this).val() == "") {
			$(this).val() == "Type Username";
			$('.username-label').animate({ opacity: "1" }, "fast");
		}
	});
 
	$('.password').focus(function() {
 
		$('.password-label').animate({ opacity: "0" }, "fast");
 
		if($(this).val() == "Type Password") {
			$(this).val() == "";
		}
	}).blur(function() {
 
		if($(this).val() == "") {
			$(this).val() == "Type Password";
			$('.password-label').animate({ opacity: "1" }, "fast");
		}
	});
 
	gauge.add(document.getElementById('gauge'), {
		width:600,
		height:30,
		limit: true,
		gradient: true,
		scale: 10,
		colors:['#ff0000','#00ff00'],
		values:[0,100]});	
 
	$('.username, .password').keyup(function(){
 
		result = passwordStrengthPercent($('.password').val(),$('.username').val());
 
		gauge.modify(	document.getElementById('gauge_gauge'),
							{ values : [ result,100 ] }
						);
 
	});
 
});

Explanation :

$('.username').focus(function() {

detecting wheter the username input is in focused condition or not.

$('.username-label').animate({ opacity: "0" }, "fast");

hiding username lable (Type Username) by decreasing the opacity, using the animation function from jQuery.

if($(this).val() == "Type Username") {
	$(this).val() == "";
}

If the value of input username is “Type Username”, the input username will be emptied.

}).blur(function() {

reading whether the input username has not been in focused condition.

if($(this).val() == "") {
	$(this).val() == "Type Username";
	$('.username-label').animate({ opacity: "1" }, "fast");
}

if the value of input username is still null we should fill it with “Type Username” and show the username lable by increasing the opacity of that lable using the same animation technic.
The script on the input password is just the same like above discussion.

gauge.add(document.getElementById('gauge'), {	width:600,
	height:30,
	limit: true,
	gradient: true,
	scale: 10,
	colors:['#ff0000','#00ff00'],
	values:[0,100]});

Generating a gauge with certain parameter.

$('.username, .password').keyup(function(){

Checking whether the user is typing input username and password.

result = passwordStrengthPercent($('.password').val(),$('.username').val());

Running the Password Strength Meter function by adding two parameters from input username and input password and then save it into variable named result.

gauge.modify(	document.getElementById('gauge_gauge'),
					{ values : [ result,100 ] }
				);

Modifying gauge meter that we have made before based on score calculated by Password Strength Meter represented by variable named result.

Stop. You have just finished your form. It’s simpe, isn’t it? Feel free to try the following demo. By the way, I don’t provide the download source because the authors of the scripts only allow you to download the them directly from their web, so, please visit Password Strength Meter and gauge.js website. You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed. If you like this post, your sharing and feedback would be very appreciated

Tags :   Charts    Forms    Free Stuff    jQuery  

Share :           Implement Password Strength Meter & Gauge.js (via @hdytsgt)

  Similar Stuffs  

• Mask Your Input Forms and Make It Beauty
• Howto Create Mac-like Login Form
• [Code Snippet] jQuery : Confirm Before Exit
• jQuery Plugin : jQuery iPhone UI
• Nice Menu : CSS Animation & jQuery Animate