Building a password strength meter

In this example, we will use the PasswordStrength plugin to build a password strength meter. It is powered by the Dropbox's zxcvbn library.

For anyone who haven't known about zxcvbn library, it's a password strength estimator inspired by password crackers developed by Dropbox. It can recognize and weighs 30k common passwords. For more information about this library, you can refer to its official page.

Using the PasswordStrength plugin, it's quite easy for us to see how strong a given password is:

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) {
                    ...
                }
            }),
            ...
        },
    }
);

The onValidated callback is executed after zxcvbn calculates the password's score which is passed as score parameter.

It is an integer number between 0 and 4 indicating the strength level:

Score	Description
0	Too guessable: risky password
1	Very guessable: protection from throttled online attacks
2	Somewhat guessable: protection from unthrottled online attacks
3	Safely unguessable: moderate protection from offline slow-hash scenario
4	Very unguessable: strong protection from offline slow-hash scenario

Using the score value, we can show a meter to let user know how strong password is.

<div class="fl w-50 ba b--black-10 h1">
    <div id="passwordMeter" class="h-100"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function(e) {
        // The password meter element
        const passwordMeter = document.getElementById('passwordMeter');

        const randomNumber = function(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        };

        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) {
                            // Set the styles for password meter element
                            // based on the score
                            switch (score) {
                                case 0:
                                    passwordMeter.style.width = randomNumber(1, 20) + '%';
                                    passwordMeter.style.backgroundColor = '#ff4136';
                                case 1:
                                    passwordMeter.style.width = randomNumber(20, 40) + '%';
                                    passwordMeter.style.backgroundColor = '#ff4136';
                                    break;
                                case 2:
                                    passwordMeter.style.width = randomNumber(40, 60) + '%';
                                    passwordMeter.style.backgroundColor = '#ff4136';
                                    break;
                                case 3:
                                    passwordMeter.style.width = randomNumber(60, 80) + '%';
                                    passwordMeter.style.backgroundColor = '#ffb700';
                                    break;
                                case 4:
                                    passwordMeter.style.width = '100%';
                                    passwordMeter.style.backgroundColor = '#19a974';
                                    break;
                                default:
                                    break;
                            }
                        },
                    }),
                    ...
                },
            }
        );
    });
</script>

Building a password strength meter

If your form uses one of the following plugin, you can use the framework progress bar component as listed in the table below:

Plugin	Progress bar component
Bootstrap plugin	Bootstrap Progress component
Bootstrap3 plugin	Bootstrap3 Progress component
Bulma plugin	Bulma Progress component
Foundation plugin	Foundation Progress Bar component
Mini plugin	Mini Progress Bar component
Semantic plugin	Semantic Progress component
Spectre plugin	Spectre Progress component
UIKit plugin	UIKit Progress component

Building a password strength meter

See also