title: password validation on specific characters in javascript
body: <p>I have to validate the password and confirm password fields. I also have to show on which fields their characters do not match. This is the code I have so far without the characters check.</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 checkPaswd(){
      
      if (document.getElementById('pass1').value !== "" &amp;&amp; document.getElementById('ppass').value !== "")
              {if(document.getElementById("pass1").value == document.getElementById("ppass").value){
                document.getElementById('msg').style.color = 'green';
                document.getElementById('msg').innerHTML = 'matching';
       }
      
      }
      else {
        document.getElementById('msg').style.color = 'red';
              document.getElementById('msg').innerHTML = 'not matching';
      }
      
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;form id="pass-form"&gt;
       Password:
       &lt;input name="pass1" id="pass1" type="password" pattern=".{10,}" placeholder="Password" required onkeyup="checkPaswd(); return false;" oninvalid="this.setCustomValidity('Password is not 10+ characters');" oninput="this.setCustomValidity('');"&gt;
       
       Confirm Password:
       &lt;input name="ppass" id="ppass" type="password" pattern=".{10,}" placeholder="Confirm Password" required onkeyup="checkPaswd(); return false;" oninvalid="this.setCustomValidity('Password not empty');" oninput="this.setCustomValidity('');"&gt;
       &lt;span id="msg"&gt;&lt;/span&gt;
       &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>