No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Added URL to the official page Mar 1, 2015
pStrength.jquery.demo.html Updated plugin to use multiple elements Mar 2, 2014
pStrength.jquery.js Update pStrength.jquery.js Apr 20, 2017
package.json Update package.json Mar 14, 2017

README.md

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