Hello everyone.
I am working on a Password Strength Meter and I am running into 1 problem that I would like to fix.
When pressing the "Clear Password & Try Again" button, the password clears out of the text box, but the meter will stay at its current position until text is entered back into the textbox. Once text is re-entered, the meter will display the results again. I would like everything to reset when the button is pushed, but I am not exactly sure how to go about this... any help?
This is what I have for the HTML code:
[HTML]<html><body>
<form name=passwordFo rm id="mypassword" >
<h1><b><font face="Arial"><f ont color="#003366" >Password Strength Meter</font><font color="#FF9933" ></font></font></b></h1>
<script type="text/javascript" src="pwd_streng th1A.js"></script>
<p>
<b>Password Complexity Rules:</b><br>
- Password must be at least 8 characters.<br>
- Password must contain at least 3 of the 4 categories:<br>
&nb sp; 1.) Lower-Case letter<br>
&nb sp; 2.) Upper-Case letter<br>
&nb sp; 3.) Number<br>
&nb sp; 4.) Non-alphanumerical character<br>
<p>
<b>Test Password:</b><br/>
<input type="text" id="mypassword " name="mypasswor d" onkeyup="runPas sword(this.valu e, 'mypassword');"/><br/><br/>
<b>Password Strength:</b><p>
<div id="mypassword_ text" style="font-size: 14px;"></div>
<div style="border: 1px solid gray; width: 250px;">
<div id="mypassword_ bar" style="font-size: 14px; height: 10px; width: 20px; border: 1px solid white;"></div></div>
<p>
<input type=reset id="resetButton " value="Clear Password & Try Again" onClick="resetM eter()"><p>
</form>
[/HTML]
This is what I have for the .js file:
Note: I took out a lot of the score values to make the code shorter
[CODE=javascript] // Password strength meter v4.0
/*
Password Text Range:
>= 100: Very Strong
>= 65-99: Strong
>= 26-64: Fair
>= 1-25: Weak
>= 0: Fail
Password Requirements:
1.) Your new password must differ from your last 50 passwords.
2.) Must contain at least (1) lower-case letters.
3.) Must contain at least (1) upper-case letters.
4.) Must contain at least (1) numbers.
5.) Must contain at least (1) non-alphanumerical characters.
6.) Must be at least 8 characters in length for total characters.
*/
// Settings
// -- Toggle to true or false, if you want to change what is checked in the password
var m_strUpperCase = "ABCDEFGHIJKLMN OPQRSTUVWXYZ";
var m_strLowerCase = "abcdefghijklmn opqrstuvwxyz";
var m_strNumber = "0123456789 ";
var m_strCharacters = "!@#$%^&*?_~<>, ./\':;][}{| +()`=-";
var nUpperCount = 0;
var nLowerCount = 0;
var nLowerUpperCoun t = 0;
var nNumberCount = 0;
var nCharacterCount = 0;
//------------------------------------------------------
// Check Password
//------------------------------------------------------
// - Checks password against criteria & adds to score
//------------------------------------------------------
function checkPassword(s trPassword)
{
var nScore = 0;
nUpperCount = countContain(st rPassword, m_strUpperCase) ;
nLowerCount = countContain(st rPassword, m_strLowerCase) ;
nLowerUpperCoun t = nUpperCount + nLowerCount;
nNumberCount = countContain(st rPassword, m_strNumber);
nCharacterCount = countContain(st rPassword, m_strCharacters );
//----------------
// Length
//---------------
// -- Less than 4 characters
else if (strPassword.le ngth < 5)
{
nScore += 5;
}
else if (strPassword.le ngth > 5)
{
nScore += 15;
}
//-----------
// Letters
//----------
// -- Letters are mixed
if (nUpperCount != 0 && nLowerCount != 0 && nLowerUpperCoun t != 0 )
{
nScore += 10;
}
//-------------
// Numbers
//-------------
// -- 1 number
if (nNumberCount > 1)
{
nScore += 10;
}
//---------------
// Characters
//---------------
// -- 1 character
if (nCharacterCoun t > 1)
{
nScore += 10;
}
//---------------
// Bonus
//---------------
//---------
// 20 pts.
//---------
// -- Mixed case letters and characters
else if (nNumberCount == 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 20;
}
// -- Lowercase letters, numbers, and characters
else if (nNumberCount != 0 && nUpperCount == 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 20;
}
// -- Uppercase letters, numbers, and characters
else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount == 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 20;
}
// -- Mixed case letters and numbers
else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount == 0 && strPassword.len gth > 7)
{
nScore += 20;
}
//---------
// 25 pts.
//---------
// -- Mixed case letters, numbers, and characters
else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 25;
}
return nScore;
}
//------------------------------------------------------
// Run Password
//------------------------------------------------------
// - Runs password through check and then updates GUI
//------------------------------------------------------
function runPassword(str Password, strFieldID)
{
// Check password
var nScore = checkPassword(s trPassword);
var strLog = "Please enter a Password to test.";
// Get controls
var ctlBar = document.getEle mentById(strFie ldID + "_bar");
var ctlText = document.getEle mentById(strFie ldID + "_text");
if (!ctlBar || !ctlText)
return;
// Set new width
ctlBar.style.wi dth = nScore + "%";
// Set Color and text
// -- Very Strong
if (nScore == 100)
{
var strText = "Very Strong";
var strColor = "#16A400";
}
// -- Strong
else if ((nScore >= 90) && (nScore <= 99))
{
var strText = "Strong";
var strColor = "#24B300";
}
// -- Strong
else if ((nScore >= 75) && (nScore <= 89))
{
var strText = "Strong";
var strColor = "#00C90E";
}
// -- Strong
else if ((nScore >= 65) && (nScore <= 74))
{
var strText = "Strong";
var strColor = "#1BE800";
}
// -- Fair
else if ((nScore >= 46) && (nScore <= 64))
{
var strText = "Fair";
var strColor = "#FFCC00";
}
// -- Fair
else if ((nScore >= 36) && (nScore <= 45))
{
var strText = "Fair";
var strColor = "#FF8000";
}
// -- Fair
else if ((nScore >= 26) && (nScore <= 35))
{
var strText = "Fair";
var strColor = "#FF6600";
}
// -- Weak
else if ((nScore >= 16) && (nScore <= 25))
{
var strText = "Weak";
var strColor = "#FF3300";
}
// -- Weak
else if ((nScore >= 1) && (nScore <=15))
{
var strText = "Weak";
var strColor = "#FF0000";
}
// -- No Score
else if (nScore == 0)
{
var strText = "";
var strColor = "#FFFFFF";
}
ctlBar.style.ba ckgroundColor = strColor;
ctlText.innerHT ML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
}
function resetMeter(strF ieldID)
{
var nScore = 0;
var strText = "";
// Set Controls
var ctlBar = document.getEle mentById(strFie ldID + "_bar");
var ctlText = document.getEle mentById(strFie ldID + "_text");
// Set new width
ctlBar.style.wi dth = nScore + "%";
ctlText.innerHT ML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
document.forms. passwordForm.re setButton.oncli ck = (resetMeter);
runPassword(str Password);
}
//------------------------------------------------------
// Count Characters
//------------------------------------------------------
// - Checks a string for a list of characters
//------------------------------------------------------
function countContain(st rPassword, strCheck)
{
// Declare variables
var nCount = 0;
for (i = 0; i < strPassword.len gth; i++)
{
if (strCheck.index Of(strPassword. charAt(i)) > -1)
{
nCount++;
}
}
return nCount;
}
[/CODE]
I am working on a Password Strength Meter and I am running into 1 problem that I would like to fix.
When pressing the "Clear Password & Try Again" button, the password clears out of the text box, but the meter will stay at its current position until text is entered back into the textbox. Once text is re-entered, the meter will display the results again. I would like everything to reset when the button is pushed, but I am not exactly sure how to go about this... any help?
This is what I have for the HTML code:
[HTML]<html><body>
<form name=passwordFo rm id="mypassword" >
<h1><b><font face="Arial"><f ont color="#003366" >Password Strength Meter</font><font color="#FF9933" ></font></font></b></h1>
<script type="text/javascript" src="pwd_streng th1A.js"></script>
<p>
<b>Password Complexity Rules:</b><br>
- Password must be at least 8 characters.<br>
- Password must contain at least 3 of the 4 categories:<br>
&nb sp; 1.) Lower-Case letter<br>
&nb sp; 2.) Upper-Case letter<br>
&nb sp; 3.) Number<br>
&nb sp; 4.) Non-alphanumerical character<br>
<p>
<b>Test Password:</b><br/>
<input type="text" id="mypassword " name="mypasswor d" onkeyup="runPas sword(this.valu e, 'mypassword');"/><br/><br/>
<b>Password Strength:</b><p>
<div id="mypassword_ text" style="font-size: 14px;"></div>
<div style="border: 1px solid gray; width: 250px;">
<div id="mypassword_ bar" style="font-size: 14px; height: 10px; width: 20px; border: 1px solid white;"></div></div>
<p>
<input type=reset id="resetButton " value="Clear Password & Try Again" onClick="resetM eter()"><p>
</form>
[/HTML]
This is what I have for the .js file:
Note: I took out a lot of the score values to make the code shorter
[CODE=javascript] // Password strength meter v4.0
/*
Password Text Range:
>= 100: Very Strong
>= 65-99: Strong
>= 26-64: Fair
>= 1-25: Weak
>= 0: Fail
Password Requirements:
1.) Your new password must differ from your last 50 passwords.
2.) Must contain at least (1) lower-case letters.
3.) Must contain at least (1) upper-case letters.
4.) Must contain at least (1) numbers.
5.) Must contain at least (1) non-alphanumerical characters.
6.) Must be at least 8 characters in length for total characters.
*/
// Settings
// -- Toggle to true or false, if you want to change what is checked in the password
var m_strUpperCase = "ABCDEFGHIJKLMN OPQRSTUVWXYZ";
var m_strLowerCase = "abcdefghijklmn opqrstuvwxyz";
var m_strNumber = "0123456789 ";
var m_strCharacters = "!@#$%^&*?_~<>, ./\':;][}{| +()`=-";
var nUpperCount = 0;
var nLowerCount = 0;
var nLowerUpperCoun t = 0;
var nNumberCount = 0;
var nCharacterCount = 0;
//------------------------------------------------------
// Check Password
//------------------------------------------------------
// - Checks password against criteria & adds to score
//------------------------------------------------------
function checkPassword(s trPassword)
{
var nScore = 0;
nUpperCount = countContain(st rPassword, m_strUpperCase) ;
nLowerCount = countContain(st rPassword, m_strLowerCase) ;
nLowerUpperCoun t = nUpperCount + nLowerCount;
nNumberCount = countContain(st rPassword, m_strNumber);
nCharacterCount = countContain(st rPassword, m_strCharacters );
//----------------
// Length
//---------------
// -- Less than 4 characters
else if (strPassword.le ngth < 5)
{
nScore += 5;
}
else if (strPassword.le ngth > 5)
{
nScore += 15;
}
//-----------
// Letters
//----------
// -- Letters are mixed
if (nUpperCount != 0 && nLowerCount != 0 && nLowerUpperCoun t != 0 )
{
nScore += 10;
}
//-------------
// Numbers
//-------------
// -- 1 number
if (nNumberCount > 1)
{
nScore += 10;
}
//---------------
// Characters
//---------------
// -- 1 character
if (nCharacterCoun t > 1)
{
nScore += 10;
}
//---------------
// Bonus
//---------------
//---------
// 20 pts.
//---------
// -- Mixed case letters and characters
else if (nNumberCount == 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 20;
}
// -- Lowercase letters, numbers, and characters
else if (nNumberCount != 0 && nUpperCount == 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 20;
}
// -- Uppercase letters, numbers, and characters
else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount == 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 20;
}
// -- Mixed case letters and numbers
else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount == 0 && strPassword.len gth > 7)
{
nScore += 20;
}
//---------
// 25 pts.
//---------
// -- Mixed case letters, numbers, and characters
else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.len gth > 7)
{
nScore += 25;
}
return nScore;
}
//------------------------------------------------------
// Run Password
//------------------------------------------------------
// - Runs password through check and then updates GUI
//------------------------------------------------------
function runPassword(str Password, strFieldID)
{
// Check password
var nScore = checkPassword(s trPassword);
var strLog = "Please enter a Password to test.";
// Get controls
var ctlBar = document.getEle mentById(strFie ldID + "_bar");
var ctlText = document.getEle mentById(strFie ldID + "_text");
if (!ctlBar || !ctlText)
return;
// Set new width
ctlBar.style.wi dth = nScore + "%";
// Set Color and text
// -- Very Strong
if (nScore == 100)
{
var strText = "Very Strong";
var strColor = "#16A400";
}
// -- Strong
else if ((nScore >= 90) && (nScore <= 99))
{
var strText = "Strong";
var strColor = "#24B300";
}
// -- Strong
else if ((nScore >= 75) && (nScore <= 89))
{
var strText = "Strong";
var strColor = "#00C90E";
}
// -- Strong
else if ((nScore >= 65) && (nScore <= 74))
{
var strText = "Strong";
var strColor = "#1BE800";
}
// -- Fair
else if ((nScore >= 46) && (nScore <= 64))
{
var strText = "Fair";
var strColor = "#FFCC00";
}
// -- Fair
else if ((nScore >= 36) && (nScore <= 45))
{
var strText = "Fair";
var strColor = "#FF8000";
}
// -- Fair
else if ((nScore >= 26) && (nScore <= 35))
{
var strText = "Fair";
var strColor = "#FF6600";
}
// -- Weak
else if ((nScore >= 16) && (nScore <= 25))
{
var strText = "Weak";
var strColor = "#FF3300";
}
// -- Weak
else if ((nScore >= 1) && (nScore <=15))
{
var strText = "Weak";
var strColor = "#FF0000";
}
// -- No Score
else if (nScore == 0)
{
var strText = "";
var strColor = "#FFFFFF";
}
ctlBar.style.ba ckgroundColor = strColor;
ctlText.innerHT ML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
}
function resetMeter(strF ieldID)
{
var nScore = 0;
var strText = "";
// Set Controls
var ctlBar = document.getEle mentById(strFie ldID + "_bar");
var ctlText = document.getEle mentById(strFie ldID + "_text");
// Set new width
ctlBar.style.wi dth = nScore + "%";
ctlText.innerHT ML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
document.forms. passwordForm.re setButton.oncli ck = (resetMeter);
runPassword(str Password);
}
//------------------------------------------------------
// Count Characters
//------------------------------------------------------
// - Checks a string for a list of characters
//------------------------------------------------------
function countContain(st rPassword, strCheck)
{
// Declare variables
var nCount = 0;
for (i = 0; i < strPassword.len gth; i++)
{
if (strCheck.index Of(strPassword. charAt(i)) > -1)
{
nCount++;
}
}
return nCount;
}
[/CODE]
Comment