Password strength meter - issue connecting jQuery to html
I click on the password box and it doesn't show any meter as I enter the characters. I believe my issue is how jQuery connects to html. I'm using a piece of public scripting and looking to use it as my password strength meter for "pass1". I'll include all the script since I don't know where it could be failing. The script has a .htm extension. Here's the script so far:
:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<script>
/* Intelligent Web NameSpace */
var IW = IW || {};
/**
* Password validator logic
*/
(function(IW)
{
var secondsInADay = 86400;
function PasswordValidator() {
}
/**
* How long a password can be expected to last
*/
PasswordValidator.prototype.passwordLifeTimeInDays = 365;
/**
* An estimate of how many attempts could be made per second to guess a password
*/
PasswordValidator.prototype.passwordAttemptsPerSecond = 500;
/**
* An array of regular expressions to match against the password. Each is associated
* with the number of unique characters that each expression can match.
* @param password
*/
PasswordValidator.prototype.expressions =[
{
regex: /[A-Z]+/,
uniqueChars: 26
},
{
regex: /[a-z]+/,
uniqueChars: 26
},
{
regex: /[0-9]+/,
uniqueChars: 10
},
{
regex: /[!\?.;,\\@$£#*()%~<>{}\[\]]+/,
uniqueChars: 17
}
];
/**
* Checks the supplied password
* @param {String} password
* @return The predicted lifetime of the password, as a percentage of the defined password lifetime.
*/
PasswordValidator.prototype.checkPassword = function(password) {
var
expressions = this.expressions,
i,
l = expressions.length,
expression,
possibilitiesPerLetterInPassword = 0;
for (i = 0; i < l; i++) {
expression = expressions[i];
if (expression.regex.exec(password)) {
possibilitiesPerLetterInPassword += expression.uniqueChars;
}
}
var
totalCombinations = Math.pow(possibilitiesPerLetterInPassword, password.length),
// how long, on average, it would take to crack this (@ 200 attempts per second)
crackTime = ((totalCombinations / this.passwordAttemptsPerSecond) / 2) / secondsInADay,
// how close is the time to the projected time?
percentage = crackTime / this.passwordLifeTimeInDays;
return Math.min(Math.max(password.length * 5, percentage * 100), 100);
};
IW.PasswordValidator = new PasswordValidator();
}
)(IW);
/**
* jQuery plugin which allows you to add password validation to any
* form element.
*/
(function(IW, jQuery)
{
function updatePassword() {
var
percentage = IW.PasswordValidator.checkPassword(this.val()),
progressBar = this.parent().find(".passwordStrengthBar div");
progressBar.removeClass("strong medium weak useless").stop().animate({"width": percentage + "%"});
if (percentage > 90) {
progressBar.addClass("strong");
} else if (percentage > 50) {
progressBar.addClass("medium");
} else if (percentage > 10) {
progressBar.addClass("weak");
} else {
progressBar.addClass("useless");
}
}
jQuery.fn.passwordValidate = function() {
this.bind('keyup', jQuery.proxy(updatePassword, this)).after('<div class="passwordStrengthBar"></div>');
updatePassword.apply(this);
return this; // for chaining
}
}
)(IW, jQuery);
$("span[class='runner-nowrap']").each(function()
{
var $this = $(this);
var t = $this.html();
$this.html(t.replace(' ', ''));
}
);
$("input[type='password']").next().remove();
jQuery("input[id='pass1']").passwordValidate();
</script>
<div>
<h1>Login</h1>
<p>Your browser must allow cookies in order to log in.</p>
<form method="post">
<fieldset>
<p><b>Email Address:</b> <input type="text" name="email" size="20" maxlength="40" autofocus="autofocus" /></p>
<div class="passwordStrengthBar">
<span class='runner-nowrap'>
<p><b>Password:</b> <input type="password" name="pass1" id="pass1" size="20" maxlength="20" /></p>
</span>
</div>
<p><b>Confirm:</b> <input type="password" name="pass2" size="20" maxlength="20" /></p>
<div align="center"><input type="submit" name="submit" value="Login" /></div>
<input type="hidden" name="submitted" value="TRUE" />
</fieldset>
</form>
</div>
: