title: Password validation is at least 6 character
body: <p>I wrote some validation code for a password and confirm password that checks if they match or not. Furthermore there is a condition that checks if length of my password is less than 6 characters and writes/displays an error if they are less than 6 characters. But my code doesn't work correctly: when I switch to field 2 the condition of field 1 isn't checked and if both of conditions are correct the error still presents.</p>
  
  <p>Here is my code:</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-js lang-js prettyprint-override"><code>function checkPass()
  {
      var pass1 = document.getElementById('pass1');
      var pass2 = document.getElementById('pass2');
      var message = document.getElementById('error-nwl');
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
  
      if(pass1.value == pass2.value){
          pass2.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "ok!"
      }
      else{
          pass2.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " These passwords don't match"
      }
   
      if(pass1.length &gt; 5){
          pass1.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "character number ok!"
      }
      else{
          pass1.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " you have to enter at least 6 digit!"
      }
  }  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>         &lt;input name="password" type="password" placeholder="password"  id="pass1"/&gt;
           &lt;input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /&gt;
                    &lt;div id="error-nwl"&gt;&lt;/div&gt;
          </code></pre>
  </div>
  </div>
  </p>