Confirm password validation using JavaScript With show hide password Toggle

In this chapter, we will discuss password validation using JavaScript. We need to validate a password every time whenever a user creates an account on any website or app. So, we have to verify a valid password as well as put the confirm password validation. For a valid password, the following parameters must be contained by it to be valid –

  • At least one lowercase character.
  • At least one uppercase character.
  • At least one number.
  • At least one special character (@, $, !, &, etc).
  • At least 8 characters

Valid password Validation

In this example, we will check that the password created by the user is valid or not and match with all the parameter discussed above. See the code below for password verification.

HTML Code:

<div class="box">
  <div class="inputBox">
    <input type="Password" id="pswrd" placeholder="Password" onkeyup="checkPassword(this.value)">
    <span id="toggleBtn"></span>
  </div>
  <div class="validation">
    <ul>
      <li id="lower">At least one lowercase character</li>
      <li id="upper">At least one uppercase character</li>
      <li id="number">At least one number</li>
      <li id="special">At least one special character</li>
      <li id="length">At least 8 characters</li>
    </ul>
  </div>
</div>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #8cccff;
}
.box 
{
	position: relative;
	width: 300px;
}
.box .inputBox 
{
	position: relative;
	width: 100%;
	background: #fff;
	padding: 5px;
	border-radius: 8px;
	box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.box .inputBox input 
{
	position: relative;
	width: 100%;
	outline: none;
	padding: 10px 5px;
	border: none;
	/* border: 2px solid #999; */
}
.box .inputBox #toggleBtn 
{
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	background: rgba(0,0,0,0.05);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 20%;
}
#toggleBtn::before 
{
	content: '\f06e';
	font-family: fontAwesome;
}
#toggleBtn.hide::before 
{
	content: '\f070';
	position: absolute;
	font-family: fontAwesome;
}
.validation
{
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	margin-top: 30px;
	background: #376488;
	box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.validation ul
{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
} 
.validation ul li
{
	position: relative;
	list-style: none;
	color: #fff;
	font-size: 0.85em;
	transition: 0.5s;
}
.validation ul li.valid 
{
	color: rgba(255,255,255,0.5);
}
.validation ul li::before 
{
	content: '\f192';
	font-family: fontAwesome;
	width: 20px;
	display: inline-flex;
}
.validation ul li.valid::before 
{
	content: '\f00c';
	color: #0f0;
}

JavaScript Code:

let pswrd = document.getElementById("pswrd");
let toggleBtn = document.getElementById("toggleBtn");
let lowerCase = document.getElementById("lower");
let upperCase = document.getElementById("upper");
let digit = document.getElementById("number");
let specialChar = document.getElementById("special");
let minLength = document.getElementById("length");

// Show hide Password
toggleBtn.onclick = function(){
  if (pswrd.type === 'password') {
    pswrd.setAttribute('type', 'text');
    toggleBtn.classList.add('hide');
  }
  else {
    pswrd.setAttribute('type', 'password');
    toggleBtn.classList.remove('hide');
  }
}

function checkPassword(data){
  const lower = new RegExp('(?=.*[a-z])');
  const upper = new RegExp('(?=.*[A-Z])');
  const number = new RegExp('(?=.*[0-9])');
  const special = new RegExp('(?=.*[!@#\$%\^&\*])');
  const length = new RegExp('(?=.{8,})');

  //Lower Case Validation 
  if(lower.test(data)){
    lowerCase.classList.add('valid');
  }else{
    lowerCase.classList.remove('valid');
  }			
  //Upper Case Validation 
  if(upper.test(data)){
    upperCase.classList.add('valid');
  }else{
    upperCase.classList.remove('valid');
  }	
  //Number Validation 
  if(number.test(data)){
    digit.classList.add('valid');
  }else{
    digit.classList.remove('valid');
  }
  //Special Charater Validation 
  if(special.test(data)){
    specialChar.classList.add('valid');
  }else{
    specialChar.classList.remove('valid');
  }
  //Password Minimum Length Validation 
  if(length.test(data)){
    minLength.classList.add('valid');
  }else{
    minLength.classList.remove('valid');
  }
}

Preview:

See the Pen Password Validation Check in JavaScript by Rashedul Hasan (@rhsuman) on CodePen.

RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply