Password and Confirm Password Validation in HTML CSS & JavaScript

Confirm Password Check in HTML CSS & JavaScript

Hey friends, today in this blog you'll learn how to Password and Confirm Password Validation using HTML CSS & JavaScript. In the earlier blog, I have shared how to check Email Validation using JavaScript and now I'm going to create a form to check the password and confirm password validation.

You may have seen the password and confirm password fields on the most of signup forms. Confirm password field is required to include when creating a password. It is because a password field hides the user's input. If users mistype their password, they won't recognize it. The confirm password catches types by helping users to type their password twice. By using this confirm password field there is less or no chance to mistype passwords by users.

In our program Password and Confirm Password Validation, at first, there is a white container on the webpage and inside this container, there is a title, two input fields, and a check button. When you enter some characters on those password fields and click on the check, if your password and confirm password matched with each other then there is displayed a success message but if you're two passwords not matched with each other then there is displayed an error message. There is also a toggle button or icon to show or hide the password characters. Using this toggle you can easily recognize the mistyped character of your passwords.

Video Tutorial of Confirm Password Validation in HTML

In the video, you have seen the Password and Confirm Password Validation in HTML CSS & JavaScript and I believe you understood the basic codes behind creating this program. As you know, the Confirm Password field is much necessary while creating a password field. If you're a beginner and you only know HTML & CSS then you can use this program on your projects and signup pages.

But if you know JavaScript then you can add more features to this program and take this program to the next level. If you like this Confirm Password Validation in HTML and want to get source codes then you can easily copy the codes from the given copy boxes or you can also download the source code files of this program.

Confirm Password Check using JavaScript [Source Codes]

To create this program Confirm Password Validation in HTML & JavaScript. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this timeline design from the below download button.

HTML CODE:

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Confirm Password Check | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <header>Confirm Password Check in <br>HTML CSS & JavaScript</header>
      <form action="#">
        <div class="error-text">
</div>
<div class="field">
          <input onkeyup="active()" id="pswrd_1" type="password" placeholder="Enter Password">
        </div>
<div class="field">
          <input onkeyup="active_2()" id="pswrd_2" disabled type="password" placeholder="Confirm Password">
          <div class="show">
SHOW</div>
</div>
<button disabled>Check</button>
      </form>
</div>
<script>
      const pswrd_1 = document.querySelector("#pswrd_1");
      const pswrd_2 = document.querySelector("#pswrd_2");
      const errorText = document.querySelector(".error-text");
      const showBtn = document.querySelector(".show");
      const btn = document.querySelector("button");
      function active(){
        if(pswrd_1.value.length >= 6){
          btn.removeAttribute("disabled", "");
          btn.classList.add("active");
          pswrd_2.removeAttribute("disabled", "");
        }else{
          btn.setAttribute("disabled", "");
          btn.classList.remove("active");
          pswrd_2.setAttribute("disabled", "");
        }
      }
      btn.onclick = function(){
        if(pswrd_1.value != pswrd_2.value){
          errorText.style.display = "block";
          errorText.classList.remove("matched");
          errorText.textContent = "Error! Confirm Password Not Match";
          return false;
        }else{
          errorText.style.display = "block";
          errorText.classList.add("matched");
          errorText.textContent = "Nice! Confirm Password Matched";
          return false;
        }
      }
      function active_2(){
        if(pswrd_2.value != ""){
          showBtn.style.display = "block";
          showBtn.onclick = function(){
            if((pswrd_1.type == "password") && (pswrd_2.type == "password")){
              pswrd_1.type = "text";
              pswrd_2.type = "text";
              this.textContent = "Hide";
              this.classList.add("active");
            }else{
              pswrd_1.type = "password";
              pswrd_2.type = "password";
              this.textContent = "Show";
              this.classList.remove("active");
            }
          }
        }else{
          showBtn.style.display = "none";
        }
      }
    </script>

  </body>
</html>

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.container{
  background: #fff;
  padding: 20px 30px;
  width: 420px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.container header{
  padding-top: 5px;
  font-size: 25px;
  font-weight: 600;
  line-height: 33px;
}
.container form{
  margin: 5px 8px;
}
.container form .error-text{
  background: #F8D7DA;
  padding: 8px 0;
  border-radius: 5px;
  color: #8B3E46;
  border: 1px solid #F5C6CB;
  display: none;
}
.container form .error-text.matched{
  background: #D4EDDA;
  color: #588C64;
  border-color: #C3E6CB;
}
.container form .field{
  width: 100%;
  height: 45px;
  display: flex;
  margin: 15px 0;
  position: relative;
}
form .field input{
  width: 100%;
  height: 100%;
  border: 1px solid lightgrey;
  padding-left: 15px;
  outline: none;
  border-radius: 5px;
  font-size: 17px;
  transition: all 0.3s;
}
form .field input::placeholder{
  font-size: 16px;
}
form .field input:focus{
  border-color: #27ae60;
  box-shadow: inset 0 0 3px #2fd072;
}
form .field .show{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  display: none;
}
form .field .show.active{
  color: #27ae60;
}
form button{
  width: 100%;
  height: 45px;
  margin: 3px 0 10px 0;
  border: none;
  outline: none;
  background: #27ae60;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: no-drop;
  opacity: 0.7;
}
form button.active{
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s;
}
form button.active:hover{
  background: #219150;
}

Download code files

Video Tutorial of Confirm Password Validation in HTML

You might like this:

Confirm Password Check using JavaScript [Source Codes]

Post a Comment

Post a Comment

About Us

Contact Form