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: 7 Reasons To Learn MySQL For Web Programming
$(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: 7 Reasons To Learn MySQL For Web Programming
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: