Password Validation In Javascript | Confirm Password Validation – Codewithrandom

 <div class="container">  
   <form action="#">  
      <input type="password" class="password" id="password" placeholder="your password" onkeyup='check()'>  
      <input type="password" id="checkPassword" class="password" placeholder="confirm your password" onkeyup='check()'>  
      <p id="alertPassword"></p>  
   </form>  
 </div>  

There is all the HTML code for the Password Validation. Now, you can see an output with Password Validation then we write javascript for Password Validation.

 @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,900&display=swap');  
 * {  
   padding: 0;  
   margin: 0;  
 }  
 .container {  
   width: 100%;  
   height: 100vh;    
   background: #232323;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
 }  
 form {  
   flex-direction: column;  
   display: flex;  
   width: 500px;  
 }  
 .row {  
   position: relative;  
 }  
 input.password {  
   width: 100%;  
   background: transparent;  
   border: none;  
   border-bottom: 2px solid #fff;  
   padding: 0 0 20px 0;  
   margin-top: 50px;  
   font-family: 'Poppins';  
   color: #fff;  
   outline: none;  
   font-size: 16px;  
   letter-spacing: 2px;     
 }  
 span {  
   width: 100%;  
   display: flex;  
   margin: 20px 0px 0px 0px;  
   font-family: 'Poppins';  
   font-weight: 400;  
   text-transform: uppercase;  
   font-size: 12px;  
   letter-spacing: 2px;  
   display: flex;  
   align-items: center  
 }  
 i, .far {  
   margin-right: 15px  
 }  

Css Updated output

  var check = function() {  
    if (document.getElementById('password').value ==  
      document.getElementById('checkPassword').value) {  
      document.getElementById('alertPassword').style.color = '#8CC63E';  
      document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-check-circle"></i>Match !</span>';  
    } else {  
              document.getElementById('alertPassword').style.color = '#EE2B39';  
      document.getElementById('alertPassword').innerHTML = '<span><i class="fas fa-exclamation-triangle"></i>not matching</span>';  
    }  
  }  

Final output