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: How to Learn PHP for Beginners? Here Are Some Useful Tips
$(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: How to Learn PHP for Beginners? Here Are Some Useful Tips
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

The usage of Bootstrap-DateTimePicker for Date Range

Hallo now, we as Web Design Surabaya wants to give the tutorial about the usage of bootstrap-datetimepicker for choosing check in and check out date. You do not only choose the date range but also the date and time range. To run the tutorial of date ...


Understand These Steps If You Want To Learn Javascript

It is great if you want to learn Javascript. Yet, you must prepare everything first, so you are ready to implement the knowledge directly on your computer or laptop. Here, we will explain to you the early steps before learning or using Javascript on ...


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


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