pStrength jQuery Plugin - Javascript password strength checker

We have developed a jQuery plugin which can help you adding a password strength feature to your own accounts forms.

pStrength plugin defaults

$('#myElement').pStrength({
    'bind': 'keyup change',
    'changeBackground': true,
    'backgrounds'     : [['#cc0000', '#FFF'], ['#cc3333', '#FFF'], ['#cc6666', '#FFF'], ['#ff9999', '#FFF'],
                        ['#e0941c', '#FFF'], ['#e8a53a', '#FFF'], ['#eab259', '#FFF'], ['#efd09e', '#FFF'],
                        ['#ccffcc', '#FFF'], ['#66cc66', '#FFF'], ['#339933', '#FFF'], ['#006600', '#FFF'], ['#105610', '#FFF']],
    'passwordValidFrom': 60, // 60%
    'onValidatePassword': function(percentage) { },
    'onPasswordStrengthChanged' : function(passwordStrength, percentage) { }
});
  1. bind - When bind event is raised, password will be recalculated;
  2. changeBackground - If true, the background of the element will be changed according with the strength of the password;
  3. backgrounds - Password strength will get values from 0 to 12. Each color in backgrounds represents the strength color for each value;
  4. passwordValidFrom - If you define a onValidatePassword function, this will be called only if the passwordStrength is bigger than passwordValidFrom. In that case you can use the percentage argument as you wish;
  5. onValidatePassword - Define a function which will be called each time the password becomes valid;
  6. onPasswordStrengthChanged - Define a function which will be called each time the password strength is recalculated. You can use passwordStrength and percentage arguments for designing your own password meter


Our pStrength Plugin seems to be present also on jQPlugin.net directory

How to use pStrength jQuery Plugin:

$(document).ready(function(){
    $('#myForm').submit(function(){
        return false;
    });
    
    $('#myElement1, #myElement2').pStrength({
        'changeBackground'          : false,
        'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) {
            if ($(this).val()) {
                $.fn.pStrength('changeBackground', this, passwordStrength);
            } else {
                $.fn.pStrength('resetStyle', this);
            }
            $('#' + $(this).data('display')).html('Your password strength is ' + strengthPercentage + '%');
        },
        'onValidatePassword': function(strengthPercentage) {
            $('#' + $(this).data('display')).html(
                $('#' + $(this).data('display')).html() + ' Great, now you can continue to register!'
            );
            
            $('#myForm').submit(function(){
                return true;
            });
        }
    });
});
<form id="myForm">
    <input type="password" id="myElement1" size="40" class="left" data-display="myDisplayElement1" />
    <div class="left" id="myDisplayElement1"></div>
    <div class="clear"></div>
    <input type="password" id="myElement2" size="40" class="left" data-display="myDisplayElement2" />
    <div class="left" id="myDisplayElement2"></div>
</form>

#myElement1, #myElement2 {
    padding:4px;
    margin:2px;
    border:solid 1px #999;
}

#myElement2 {
    background-color:#036;
}

div {
    margin-left:20px;
    margin-top:6px;
}
.left {
    float:left;
}
.clear {
    clear:both;
}

Demo

Download pStrength jQuery Plugin

Download our latest version:

Download pStrength.jQuery.js

comments powered by Disqus