PasswordStrength plugin

Check the strength of a password

Usage

The PasswordStrength plugin uses the popular zxcvbn library to estimate the strength of a password.
The following piece of code is the starting point to use it:
<html>
<head>
<link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css" />
</head>
<body>
<form id="demoForm" method="POST">
<input type="password" name="pwd" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<!-- Include zxcvbn library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendors/formvalidation/dist/js/plugins/PasswordStrength.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
passwordStrength: new FormValidation.plugins.PasswordStrength({
field: 'pwd',
message: 'The password is weak',
minimalScore: 3,
onValidated: function(valid, message, score) {
...
}
}),
...
},
}
);
});
</script>
</body>
</html>
The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Options

(* denotes a required parameter)
OptionTypeDescription
field*StringThe field name
messageStringThe default error message which will be shown to let user know that the password is weak. It then will be replaced with the warning message of zxcvbn library to indicate the specific reason why the password is weak
minimalScoreNumberFor a given password, the zxcvbn library will calculate its strength and the score can be one of 0, 1, 2, 3, 4. The password will be treated as invalid if the scroce if less than minimalScore. The default value is 3
onValidatedFunctionThe callback function that will be triggered after validating the password
The onValidated function takes three parameters:
ParameterTypeDescription
validBooleanCan be true or false depending on the field is valid or not
messageStringThe error message returned by the zxcvbn library
scoreNumberThe score returned by the zxcvbn library. Can be one of 0, 1, 2, 3, 4
By using this callback, we can display a progress bar based on the score to let user know how strong the password is.

Basic example

You can choose the sample password below to see the result.
DescriptionSamples
Common password12345678, admin, abcdef, password, qwerty
Female namesmary, patricia, linda, barbara, elizabeth
Male namesjames, john, robert, michael, william
Surnamessmith, johnson, williams, jones, brown
English words on Wikipedianational, university, people, history, county
PasswordStrength plugin

See also

Changelog

v1.5.0
  • First release. It means that the PasswordStrength plugin requires FormValidation v1.5.0 or newer