I have this javascript code below that uses jquery, it is suppoed to be a password strength meter type thing.
There is a html list with 3 items. Weak, Medium, Strong and as you type a password into a password form input, it will change the class/color of the list items.
It's is mostly just for fun but I would like to make it work a little better on my page, it works when you type in but if there is an error and a user gets redirected back to my signup form, I have the password pre-filled with there password they already typed in, I would like to have this script work if a password filled already has text in it somehow, just looking at this does it seem like something that would be easy to add in?
Instead of checking on key up it needs to check like on page load too is that part possible?
<script>
$.fn.passwordStrength = function( options ){
return this.each(function(){
var that = this;that.opts = {};
that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);
that.div = $(that.opts.targetDiv);
that.defaultClass = that.div.attr('class');
that.percents = (that.opts.classes.length) ? 75 / that.opts.classes.length : 75;
v = $(this)
.keyup(function(){
if( typeof el == "undefined" )
this.el = $(this);
var s = getPasswordStrength (this.value);
var p = this.percents;
var t = Math.floor( s / p );
if( 75 <= s )
t = this.opts.classes.length - 1;
this.div
.removeAttr('class')
.addClass( this.defaultClass )
.addClass( this.opts.classes[ t ] );
})
});
function getPasswordStrength(H){
var D=(H.length);
// Added below to make all passwords less than 4 characters show as weak
if (D<4) { D=0 }
if(D>5){
D=5
}
var F=H.replace(/[0-9]/g,"");
var G=(H.length-F.length);
if(G>3){G=3}
var A=H.replace(/\W/g,"");
var C=(H.length-A.length);
if(C>3){C=3}
var B=H.replace(/[A-Z]/g,"");
var I=(H.length-B.length);
if(I>3){I=3}
var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
if(E<0){E=0}
if(E>75){E=75}
return E
}
};
//then on the page we call it like this
$(document).ready(function() {
$('input[name="password"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});
});
</script>