desainer website di surabaya

Checking Password Strength with pStrength jQuery Plugin

pStrength plugin - web design - Password Strength

the easiest way to check password strength in web design using pStrength plugin



Checking Password Strength with pStrength jQuery Plugin

When we make a web design, we often make registration form for the visitor. One of the field is password.
One thing we need is password strength to ensure the better security for login access..

To fulfill that we can use pStrength jQuery Plugin.
We just need to enter these lines below in our HTML code:

<script src="jquery-1.10.2.min.js"></script>	
<script type="text/javascript" src="pStrength.jquery.js"></script>

Then we can write jquery statement like below:

$(document).ready(function(){
    
            $('#password').pStrength({
                'changeBackground': false,
                'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) {
                    if ($(this).val()) {
                        $.fn.pStrength('changeBackground', this, passwordStrength);
                    } else {
                        $.fn.pStrength('resetStyle', this);
                    }
                    $('#' + $(this).data('display')).html('Password Strength: ' + strengthPercentage + '%');
                    
                    if(strengthPercentage < 60)
	                    	{
	                    		$('button[type=submit]').attr('disabled', 'disabled');
	    						$('form').bind('submit',function(e){e.preventDefault();});
	                    	}
	                    else
	                    	{
	                    		$('button[type=submit]').removeAttr('disabled', 'disabled');
	    						$('form').unbind('submit');
	                    	}
                },
                'onValidatePassword': function(strengthPercentage) {
                    $('#' + $(this).data('display')).html(
                        $('#' + $(this).data('display')).html() + ' Great!'
                    );
                }
            });
        });

From above example we can see the part as follows:

if(strengthPercentage < 60)
	{
		$('button[type=submit]').attr('disabled', 'disabled');
		$('form').bind('submit',function(e){e.preventDefault();});
	}
else
	{
		$('button[type=submit]').removeAttr('disabled', 'disabled');
		$('form').unbind('submit');
	}

It is used to prevent form submitting if Password Strength is less than 60.

You can check the demo site below:

DEMO



Related Article

Web Design Services - Best Webdesign - Best SEO Services

Getting current total and previous one from MySQL

As the part of the Best Webdesign, we ever get the request from our customer to show the total selling in a month including previous selling to count the percentage of profit.. To do that, we often use a very simple way, namely using two queris of M ...


Restricted input type for number only by using HTML5

How to make the input type to be valid for number only? We do not need to use javascript, because we can do that easily with HTML5. Let say we want to make an input type for temperature with the following rule: minimum 30o and maximum 50o, but allow ...


Making an input type for checking valid email address in HTML

As a web design services, we often use input type="text" and input type="password" like below: For text: <input type="text" name="username" size="25" maxsize="15"> For password: <input type="password" name="password"> The syntax above ...


Working Process

Web Design - Wedding Photography - Wedding Videography

Our Location at Surabaya and Bali

Website Design in Indonesia

Graphic Design in Indonesia

Contact

+628113638531 / +628113865464

info@tatamedia.com

Webdesigner in Indonesia

Videographer in Bali

Office

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Fine Art Photography in Bali

Web Design

Support

Send your request to

info@tatamedia.com