title: Sign In prompt with javascript/HTML
body: <p>I have this sign in prompt that allows the user to enter a valid email address and then enter a password consisting of at least one number, one special character and at least 8 or more characters. Then the user would enter the password again, and the code ensures that it matches. It also implements a strength meter to tell the user how strong the password is. </p>
  
  <p>I have the meter implementing strength based on the characters entered but, I cannot figure out how to implement the length of the password. Right now if the user enters a letter, number, and special character it states that it is strong. But I need it to also have at least 8 characters as well. </p>
  
  <p>This is the specific function that I believe needs adjusting;</p>
  
  <pre><code>// Function for password strength meter
    function PasswordMeter(password) {
        if (password.length === 0) {
            document.getElementById("msg").innerHTML = "";
            return;
         }
         var matchedCase = new Array();
         matchedCase.push("[$@$!%*#?&amp;]"); // Special Charector
         matchedCase.push("[0-9]");      // Numbers
         matchedCase.push("[a-z]");     // Lowercase Alphabates
  
         var ctr = 0;
         for (var i = 0; i &lt; matchedCase.length; i++) {
              if (new RegExp(matchedCase[i]).test(password)) {
                  ctr++;
              }
         }
  
         var color = "";
         var strength = "";
         switch (ctr) {
              case 0:
              case 1:
                   strength = "Weak: Keep going...";
                   color = "red";
                   break;
              case 2:
                   strength = "Medium: A little better but add more..";
                   color = "blue";
                   break;
              case 3:
                   strength = "Strong! Now that is good!";
                   color = "green";
                   break;
         }
         document.getElementById("msg").innerHTML = strength;
         document.getElementById("msg").style.color = color;
   }
  </code></pre>
  
  <p>And just for better perspective this is the rest of my code... I am so close to this being perfect just need a little guidance on this one piece, so thank you in advance for any advice/help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h3&gt;Sign In&lt;/h3&gt;
  
  &lt;div class="container"&gt;
    &lt;form action="/action_page.php"&gt;
    
      &lt;label for="userId"&gt;UserId:&lt;/label&gt;
      &lt;input type="email" id="userId" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$" required&gt;
  &lt;br&gt;
  &lt;br&gt;
      &lt;label for="psw1"&gt;Password:&lt;/label&gt;
      &lt;input type="password" id="psw1" name="psw1" pattern="(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&amp;*_=+-]).{8,}" title="Must contain at least one number, one special character and at least 8 or more characters" onkeyup="PasswordMeter(this.value);"/&gt;&lt;span id="msg"&gt;&lt;/span&gt;
  &lt;br&gt;
  &lt;br&gt;
      &lt;label for="psw2"&gt;Password:&lt;/label&gt;
      &lt;input type="password" id="psw2" name="psw2" pattern="(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&amp;*_=+-]).{8,}" title="Must contain at least one number, one special character and at least 8 or more characters" required&gt;
      
      &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  //Function to check if email is valid.
  
  function validateEmail(userId) {
      var re = /\S+@\S+/;
      return re.test(email);
  }
  userId.onchange = validateEmail;
  userId.onkeyup = validateEmail;
  
  
  // Function to check if both passwords is same or not. 
  var password = document.getElementById("psw1"), psw2 = document.getElementById("psw2");
  
  function validatePassword(){
    if(psw1.value != psw2.value) {
      psw2.setCustomValidity("Passwords Don't Match");
    } else {
      psw2.setCustomValidity('');
    }
  }
  
  psw1.onchange = validatePassword;
  psw2.onkeyup = validatePassword;
  
  // Function for password strength meter
    function PasswordMeter(password) {
        if (password.length === 0) {
            document.getElementById("msg").innerHTML = "";
            return;
         }
         var matchedCase = new Array();
         matchedCase.push("[$@$!%*#?&amp;]"); // Special Charector
         matchedCase.push("[0-9]");      // Numbers
         matchedCase.push("[a-z]");     // Lowercase Alphabates
  
         var ctr = 0;
         for (var i = 0; i &lt; matchedCase.length; i++) {
              if (new RegExp(matchedCase[i]).test(password)) {
                  ctr++;
              }
         }
  
         var color = "";
         var strength = "";
         switch (ctr) {
              case 0:
              case 1:
                   strength = "Weak: Keep going...";
                   color = "red";
                   break;
              case 2:
                   strength = "Medium: A little better but add more..";
                   color = "blue";
                   break;
              case 3:
                   strength = "Strong! Now that is good!";
                   color = "green";
                   break;
         }
         document.getElementById("msg").innerHTML = strength;
         document.getElementById("msg").style.color = color;
   }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>