pStrength

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

Visit the pStrength official page for an working demo @ https://accountspassword.com/password-strength-jquery-plugin

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

How to use pStrength 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;
            });
        }
    });
});

HTML code for the example above##

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

CSS code for the example above##

#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;
}