Advanced Password Validation Checking In JS

Today we will create a password authentication check using JavaScript. We will also add the ability to toggle between showing and hiding passwords.

Access to all websites that support authentication and authorization requires a username and password. If not, the user must register and create a password to access the next section; Therefore, most websites provide specific procedures or settings. The following parameters are commonly used when verifying passwords of any format.

The password box accepts only numeric characters.
Capital letters should be used as the first letter.
At least one large password.
Passwords must be long.
The password can only contain one number.
Passwords must have a minimum and maximum length.

JavaScript’s password validation functionality ensures that these instructions are executed when the user creates a password. The prerequisite is to create a password with minimum security. JavaScript code can be used to verify the pattern of a password using regular expressions.

SOURCE CODE

HTML:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Password Validation Check</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<link rel="stylesheet" href="css/style.css">
	<!-- coded by : cybercript.in -->
</head>
<body>
	<div class="box">
		<div class="inputBox">
			<input type="Password" id="pswrd" placeholder="Password" onkeyup="checkPassword(this.value)">
			<span id="toggleBtn"></span>
		</div>
		<link rel="stylesheet" href="css/style.css">
	<!-- coded by : cybercript.in -->
		<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>
	<link rel="stylesheet" href="css/style.css">
	<!-- coded by : cybercript.in -->
    <script src="js/script.js"></script>
</body>
</html>

CSS:

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
/* // <!-- coded by : cybercript.in --> */
* {
    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: #181818;
}

.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; */
    /* // <!-- coded by : cybercript.in --> */
}

.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: 50%;
}

/* // <!-- coded by : cybercript.in --> */
#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: #303030;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.validation ul {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* // <!-- coded by : cybercript.in --> */
.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;
}
/* // <!-- coded by : cybercript.in --> */

JAVASCRIPT:

JavaScript

// <!-- coded by : cybercript.in -->
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');
      }
		}
// <!-- coded by : cybercript.in -->
		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');
			}
		}
// <!-- coded by : cybercript.in -->