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=passwordForm id="mypassword">
<h1><b><font face="Arial"><font color="#003366">Password Strength Meter</font><font color="#FF9933"></font></font></b></h1>
<script type="text/javascript" src="pwd_strength1A.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>
1.) Lower-Case letter<br>
2.) Upper-Case letter<br>
3.) Number<br>
4.) Non-alphanumerical character<br>
<p>
<b>Test Password:</b><br/>
<input type="text" id="mypassword" name="mypassword" onkeyup="runPassword(this.value, '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="resetMeter()"><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
Expand|Select|Wrap|Line Numbers
- // 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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
- var m_strLowerCase = "abcdefghijklmnopqrstuvwxyz";
- var m_strNumber = "0123456789";
- var m_strCharacters = "!@#$%^&*?_~<>,./\':;][}{| +()`=-";
- var nUpperCount = 0;
- var nLowerCount = 0;
- var nLowerUpperCount = 0;
- var nNumberCount = 0;
- var nCharacterCount = 0;
- //------------------------------------------------------
- // Check Password
- //------------------------------------------------------
- // - Checks password against criteria & adds to score
- //------------------------------------------------------
- function checkPassword(strPassword)
- {
- var nScore = 0;
- nUpperCount = countContain(strPassword, m_strUpperCase);
- nLowerCount = countContain(strPassword, m_strLowerCase);
- nLowerUpperCount = nUpperCount + nLowerCount;
- nNumberCount = countContain(strPassword, m_strNumber);
- nCharacterCount = countContain(strPassword, m_strCharacters);
- //----------------
- // Length
- //---------------
- // -- Less than 4 characters
- else if (strPassword.length < 5)
- {
- nScore += 5;
- }
- else if (strPassword.length > 5)
- {
- nScore += 15;
- }
- //-----------
- // Letters
- //----------
- // -- Letters are mixed
- if (nUpperCount != 0 && nLowerCount != 0 && nLowerUpperCount != 0 )
- {
- nScore += 10;
- }
- //-------------
- // Numbers
- //-------------
- // -- 1 number
- if (nNumberCount > 1)
- {
- nScore += 10;
- }
- //---------------
- // Characters
- //---------------
- // -- 1 character
- if (nCharacterCount > 1)
- {
- nScore += 10;
- }
- //---------------
- // Bonus
- //---------------
- //---------
- // 20 pts.
- //---------
- // -- Mixed case letters and characters
- else if (nNumberCount == 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.length > 7)
- {
- nScore += 20;
- }
- // -- Lowercase letters, numbers, and characters
- else if (nNumberCount != 0 && nUpperCount == 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.length > 7)
- {
- nScore += 20;
- }
- // -- Uppercase letters, numbers, and characters
- else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount == 0 && nCharacterCount != 0 && strPassword.length > 7)
- {
- nScore += 20;
- }
- // -- Mixed case letters and numbers
- else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount == 0 && strPassword.length > 7)
- {
- nScore += 20;
- }
- //---------
- // 25 pts.
- //---------
- // -- Mixed case letters, numbers, and characters
- else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.length > 7)
- {
- nScore += 25;
- }
- return nScore;
- }
- //------------------------------------------------------
- // Run Password
- //------------------------------------------------------
- // - Runs password through check and then updates GUI
- //------------------------------------------------------
- function runPassword(strPassword, strFieldID)
- {
- // Check password
- var nScore = checkPassword(strPassword);
- var strLog = "Please enter a Password to test.";
- // Get controls
- var ctlBar = document.getElementById(strFieldID + "_bar");
- var ctlText = document.getElementById(strFieldID + "_text");
- if (!ctlBar || !ctlText)
- return;
- // Set new width
- ctlBar.style.width = 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.backgroundColor = strColor;
- ctlText.innerHTML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
- }
- function resetMeter(strFieldID)
- {
- var nScore = 0;
- var strText = "";
- // Set Controls
- var ctlBar = document.getElementById(strFieldID + "_bar");
- var ctlText = document.getElementById(strFieldID + "_text");
- // Set new width
- ctlBar.style.width = nScore + "%";
- ctlText.innerHTML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
- document.forms.passwordForm.resetButton.onclick = (resetMeter);
- runPassword(strPassword);
- }
- //------------------------------------------------------
- // Count Characters
- //------------------------------------------------------
- // - Checks a string for a list of characters
- //------------------------------------------------------
- function countContain(strPassword, strCheck)
- {
- // Declare variables
- var nCount = 0;
- for (i = 0; i < strPassword.length; i++)
- {
- if (strCheck.indexOf(strPassword.charAt(i)) > -1)
- {
- nCount++;
- }
- }
- return nCount;
- }