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: The usage of Bootstrap-DateTimePicker for Date Range
$(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: The usage of Bootstrap-DateTimePicker for Date Range
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: