By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,780 Members | 1,520 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,780 IT Pros & Developers. It's quick & easy.

Password Strength Meter Reset Problem

P: 6
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=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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.) Lower-Case letter<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.) Upper-Case letter<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.) Number<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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
  1.     // Password strength meter v4.0
  2.  
  3. /*
  4.  
  5.     Password Text Range:
  6.  
  7.         >= 100:   Very Strong
  8.         >= 65-99: Strong
  9.         >= 26-64: Fair
  10.         >= 1-25:  Weak
  11.         >= 0:     Fail
  12.  
  13.     Password Requirements:
  14.         1.) Your new password must differ from your last 50 passwords.
  15.         2.) Must contain at least (1) lower-case letters.
  16.         3.) Must contain at least (1) upper-case letters.
  17.         4.) Must contain at least (1) numbers.
  18.         5.) Must contain at least (1) non-alphanumerical characters.
  19.         6.) Must be at least 8 characters in length for total characters.
  20.  
  21. */
  22.  
  23.  
  24. // Settings
  25. // -- Toggle to true or false, if you want to change what is checked in the password
  26. var m_strUpperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  27. var m_strLowerCase = "abcdefghijklmnopqrstuvwxyz";
  28. var m_strNumber = "0123456789";
  29. var m_strCharacters = "!@#$%^&*?_~<>,./\':;][}{| +()`=-";
  30.  
  31. var nUpperCount = 0;
  32. var nLowerCount = 0;
  33. var nLowerUpperCount = 0;
  34. var nNumberCount = 0;    
  35. var nCharacterCount = 0;
  36.  
  37. //------------------------------------------------------
  38. //        Check Password
  39. //------------------------------------------------------ 
  40. // - Checks password against criteria & adds to score
  41. //------------------------------------------------------
  42. function checkPassword(strPassword)
  43. {
  44.     var nScore = 0;
  45.  
  46.     nUpperCount = countContain(strPassword, m_strUpperCase);
  47.     nLowerCount = countContain(strPassword, m_strLowerCase);
  48.     nLowerUpperCount = nUpperCount + nLowerCount;
  49.     nNumberCount = countContain(strPassword, m_strNumber);    
  50.     nCharacterCount = countContain(strPassword, m_strCharacters);
  51.  
  52.     //----------------
  53.     //    Length
  54.     //---------------
  55.  
  56.     // -- Less than 4 characters
  57.     else if (strPassword.length < 5)
  58.     {
  59.         nScore += 5;
  60.     }
  61.     else if (strPassword.length > 5)
  62.     {
  63.         nScore += 15;
  64.     }
  65.     //-----------
  66.     //  Letters
  67.     //----------
  68.  
  69.     // -- Letters are mixed
  70.     if (nUpperCount != 0 && nLowerCount != 0 && nLowerUpperCount != 0 ) 
  71.     { 
  72.         nScore += 10; 
  73.     }
  74.  
  75.     //-------------
  76.     //   Numbers
  77.     //-------------
  78.  
  79.     // -- 1 number
  80.     if (nNumberCount > 1)
  81.     {
  82.         nScore += 10;
  83.     }
  84.  
  85.     //---------------
  86.     //  Characters
  87.     //---------------
  88.  
  89.     // -- 1 character
  90.     if (nCharacterCount > 1)
  91.     {
  92.         nScore += 10;
  93.     }    
  94.  
  95.     //---------------
  96.     //     Bonus
  97.     //---------------
  98.  
  99.     //---------
  100.     //  20 pts.
  101.     //---------
  102.  
  103.     // -- Mixed case letters and characters
  104.     else if (nNumberCount == 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.length > 7)
  105.     {
  106.         nScore += 20;
  107.     }
  108.  
  109.     // -- Lowercase letters, numbers, and characters
  110.     else if (nNumberCount != 0 && nUpperCount == 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.length > 7)
  111.     {
  112.         nScore += 20;
  113.     }
  114.  
  115.     // -- Uppercase letters, numbers, and characters
  116.     else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount == 0 && nCharacterCount != 0 && strPassword.length > 7)
  117.     {
  118.         nScore += 20;
  119.     }
  120.  
  121.     // -- Mixed case letters and numbers
  122.     else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount == 0 && strPassword.length > 7)
  123.     {
  124.         nScore += 20;
  125.     }
  126.  
  127.     //---------
  128.     //  25 pts.
  129.     //---------
  130.  
  131. // -- Mixed case letters, numbers, and characters
  132.     else if (nNumberCount != 0 && nUpperCount != 0 && nLowerCount != 0 && nCharacterCount != 0 && strPassword.length > 7)
  133.     {
  134.         nScore += 25;
  135.     }
  136.  
  137.     return nScore;
  138. }
  139. //------------------------------------------------------
  140. //        Run Password
  141. //------------------------------------------------------ 
  142. // - Runs password through check and then updates GUI 
  143. //------------------------------------------------------
  144. function runPassword(strPassword, strFieldID) 
  145. {
  146.     // Check password
  147.     var nScore = checkPassword(strPassword);
  148.  
  149.     var strLog = "Please enter a Password to test.";
  150.  
  151.      // Get controls
  152.         var ctlBar = document.getElementById(strFieldID + "_bar"); 
  153.         var ctlText = document.getElementById(strFieldID + "_text");
  154.  
  155.         if (!ctlBar || !ctlText)
  156.         return;
  157.  
  158.         // Set new width
  159.         ctlBar.style.width = nScore + "%";
  160.  
  161.      // Set Color and text
  162.  
  163.     // -- Very Strong
  164.     if (nScore == 100)
  165.      {
  166.          var strText = "Very Strong";
  167.          var strColor = "#16A400";
  168.      }
  169.     // -- Strong
  170.      else if ((nScore >= 90) && (nScore <= 99))
  171.      {
  172.          var strText = "Strong";
  173.          var strColor = "#24B300";
  174.      }
  175.      // -- Strong
  176.      else if ((nScore >= 75) && (nScore <= 89)) 
  177.      {
  178.          var strText = "Strong";
  179.          var strColor = "#00C90E";
  180.     }
  181.     // -- Strong
  182.      else if ((nScore >= 65) && (nScore <= 74))
  183.      {
  184.          var strText = "Strong";
  185.          var strColor = "#1BE800";
  186.     }
  187.     // -- Fair
  188.     else if ((nScore >= 46) && (nScore <= 64))
  189.      {
  190.          var strText = "Fair";
  191.          var strColor = "#FFCC00";
  192.     }
  193.     // -- Fair
  194.      else if ((nScore >= 36) && (nScore <= 45))
  195.      {
  196.          var strText = "Fair";
  197.          var strColor = "#FF8000";
  198.     }
  199.     // -- Fair
  200.      else if ((nScore >= 26) && (nScore <= 35))
  201.      {
  202.          var strText = "Fair";
  203.          var strColor = "#FF6600";
  204.     }
  205.     // -- Weak
  206.      else if ((nScore >= 16) && (nScore <= 25))
  207.      {
  208.          var strText = "Weak";
  209.          var strColor = "#FF3300";
  210.     }
  211.     // -- Weak
  212.      else if ((nScore >= 1) && (nScore <=15))
  213.      {
  214.          var strText = "Weak";
  215.          var strColor = "#FF0000";
  216.     }
  217.     // -- No Score
  218.     else if (nScore == 0)
  219.     {
  220.         var strText = "";
  221.         var strColor = "#FFFFFF";
  222.     }
  223.  
  224.     ctlBar.style.backgroundColor = strColor;
  225.     ctlText.innerHTML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
  226. }
  227.  
  228. function resetMeter(strFieldID)
  229. {
  230.     var nScore = 0;    
  231.     var strText = "";
  232.  
  233.     // Set Controls
  234.     var ctlBar = document.getElementById(strFieldID + "_bar"); 
  235.         var ctlText = document.getElementById(strFieldID + "_text");
  236.  
  237.          // Set new width
  238.         ctlBar.style.width = nScore + "%";
  239.  
  240.     ctlText.innerHTML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
  241.     document.forms.passwordForm.resetButton.onclick = (resetMeter);
  242.     runPassword(strPassword);
  243. }
  244.  
  245.  
  246. //------------------------------------------------------
  247. //                 Count Characters
  248. //------------------------------------------------------ 
  249. // - Checks a string for a list of characters
  250. //------------------------------------------------------
  251.  
  252. function countContain(strPassword, strCheck)
  253.     // Declare variables
  254.     var nCount = 0;
  255.  
  256.     for (i = 0; i < strPassword.length; i++) 
  257.     {
  258.         if (strCheck.indexOf(strPassword.charAt(i)) > -1) 
  259.         { 
  260.                 nCount++;
  261.         } 
  262.     } 
  263.     return nCount; 
  264.  
Aug 27 '07 #1
Share this Question
Share on Google+
2 Replies


iam_clint
Expert 100+
P: 1,208
Expand|Select|Wrap|Line Numbers
  1. <input type=reset id="resetButton" value="Clear Password & Try Again" onClick="resetMeter(); runPassword('', 'mypassword');"><p>
  2.  
give that a run
Aug 27 '07 #2

P: 6
You are godly.

Thanks for your help, that worked just as I wanted.
Aug 27 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.