Password Meter Bootstrap 4

Password Meter Bootstrap 4

Web Stuff 09.02.2017 5723

After the great success of our Bootstrap 3 Password Indicator version, we have rewritten the code to work with Bootstrap 4.

Password indicators shown how strong the password is in a graphical or text way, it has been proven that user actually use a stronger password when they see how strong or weak the password is.

Download Demo

We will use a little bit of jQuery and the build in progress bar from Bootstrap 4 to achieve the stylish password indicator. With this version we have also added the option to have text as well.

Javascript Function

/* Password strength indicator */
function passwordStrength(password) {

	var msg = ['not acceptable', 'very weak', 'weak', 'standard', 'looks good', 'yeahhh, strong mate.'];

	var desc = ['0%', '20%', '40%', '60%', '80%', '100%'];
	
	var descClass = ['', 'bg-danger', 'bg-danger', 'bg-warning', 'bg-success', 'bg-success'];

	var score = 0;

	// if password bigger than 6 give 1 point
	if (password.length > 6) score++;

	// if password has both lower and uppercase characters give 1 point	
	if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) score++;

	// if password has at least one number give 1 point
	if (password.match(/d+/)) score++;

	// if password has at least one special caracther give 1 point
	if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )	score++;

	// if password bigger than 12 give another 1 point
	if (password.length > 10) score++;
	
	// Display indicator graphic
	$(".jak_pstrength").removeClass(descClass[score-1]).addClass(descClass[score]).css( "width", desc[score] );

	// Display indicator text
	$("#jak_pstrength_text").html(msg[score]);

	// Output the score to the console log, can be removed when used live.
    console.log(desc[score]);
}

All lines are commented through, in the first line you can change the text to your needs if you like to show text instead of the progress bar.

var msg = ['not acceptable', 'very weak', 'weak', 'standard', 'looks good', 'yeahhh, strong mate.'];

To initiate the function you will need a little bit of jQuery where you form is shown to the visitor.

jQuery(document).ready(function(){
    	jQuery("#password").keyup(function() {
    	  passwordStrength(jQuery(this).val());
    	});
    });

Feel free to download our password indicator for Bootstrap 4 and use it in your project. Comments are open with the form below.