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:

Read: Restricted input type for number only by using HTML5
$(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:

Read: Restricted input type for number only by using HTML5
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

How to make website loads faster

As the Best Webdesign, we often face website loads slowly, because it has to wait for long time to download whole contents such as CSS, Javascript, and images. This content must be downloaded first before the browser shows the content. Now, we will ...


Learn MySQL To Find More About Its 6 Essential Functions In Different Field

People commonly learn mysql for one reason, which is web programming or web design. The truth is that’s not all. MySQL also has various usages. This article will take you to delve into those usages that not many people know, even though they ha ...


The usage of if and else in MYSQL and PHP

Hallo friends of Tatamedia, web developer in Surabaya and Bali.Now we will learn about the usage of if in mysql, so the query can be shortened. Generally, if in mysql has a form as follows: IF(condition, value_if_true, value_if_false) where:condit ...


We create RESPONSIVE WEBSITE

Responsive web is special program code, so the website can be read in all devices. It is very suitable for better page rank in search engine like google

graphic design in indonesia

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