How to Confirm the password field using the JavaScript

In this example we are going to write a JavaScript code to make sure that the user is entering the password and confirm password fields equal to each other. First of all, we are going to design the UI using the standard html file.

myTest.html

    
    


    

        

            

                Password: 
                
            

                Confirm Password: 
                
                
                

            

myTest.js

function validate() {
    var password1 = document.getElementById("pass1");
    var password2 = document.getElementById("pass2");
    var msg = document.getElementById("message");
    var greenColor = "#66cc66";
    var redColor = "#ff6666";

    if (password1.value == password2.value) {
        password2.style.backgroundColor = greenColor;
        msg.style.color = greenColor;
        msg.innerHTML = "Password is Matched!";
        return true;
    } else {
        password2.style.backgroundColor = redColor;
        msg.style.color = redColor;
        msg.innerHTML = "Password do not match! Please try again.";
        return false;
    }
}

tutorial.css

  .tutorialWrapper{
      width: 100%;
    }
    .tutorialWrapper form{
      background-color: #A9E2F3;
      border: 1px solid #cc9;
      padding: 10px;
      font-family: verdana;
      width: 75%;
      font-size: 1em;
    }
    .fieldWrapper{
      margin: 2px 0 2px 0;
      padding: 0;
    }
    .tutorialWrapper label{
      float: left;
      text-align: right;
      margin: 0 5px 0 0;
      width: 30%;
    }
    .tutorialWrapper input{
      width: 200px;
      border: 1px solid #cc9;
    }
    .confirmMessage{
      margin: 0;
      padding: 0;
      font-size: .8em;
    }

Output

When Password and Confirm Password fields are equal then we will get the following result.

Until both the fields are not equal to each other it will keep displaying the below result.