<!--
https://www.geeksforgeeks.org/create-a-password-validator-using-bootstrap-javascript/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Password Strength Checker</title>
<!-- Bootstrap CSS -->
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h2 class="mb-4">
Checking Password Strength in JavaScript
</h2>
<div class="form-group">
<label for="password">Enter Password:</label>
<div class="input-group">
<input type="password" class="form-control"
id="password"
oninput="validatePassword(this.value)">
<div class="input-group-append">
<button class="btn btn-outline-secondary"
type="button" id="togglePassword">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
</div>
<div class="form-group">
<ul>
<li id="minLength"><i class="fas fa-times
text-danger"></i> Minimum 8 characters</li>
<li id="uppercase"><i class="fas fa-times
text-danger"></i> At least one uppercase
letter</li>
<li id="lowercase"><i class="fas fa-times
text-danger"></i> At least one lowercase
letter</li>
<li id="symbol"><i class="fas fa-times
text-danger"></i>
At least one symbol (@$!%*?&)
</li>
</ul>
</div>
<span id="errorMessage" class="font-weight-bold
text-danger"></span>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and jQuery -->
<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js">
</script>
<!-- Font Awesome -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js">
</script>
<script>
// Function to toggle password visibility
document.getElementById('togglePassword').addEventListener('click',
function () {
const passwordInput = document.getElementById('password');
const icon = this.querySelector('i');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
passwordInput.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
});
function validatePassword(password) {
const strongPasswordRegex =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
const errorMessage = document.getElementById('errorMessage');
// Check each condition and update the corresponding label
document.getElementById('minLength').innerHTML =
password.length >= 8 ?
'<i class="fas fa-check text-success"></i> Minimum 8 characters' :
'<i class="fas fa-times text-danger"></i> Minimum 8 characters';
document.getElementById('uppercase').innerHTML =
/[A-Z]/.test(password) ?
'<i class="fas fa-check text-success"></i> At least one uppercase letter' :
'<i class="fas fa-times text-danger"></i> At least one uppercase letter';
document.getElementById('lowercase').innerHTML =
/[a-z]/.test(password) ?
'<i class="fas fa-check text-success"></i> At least one lowercase letter' :
'<i class="fas fa-times text-danger"></i> At least one lowercase letter';
document.getElementById('symbol').innerHTML =
/[@$!%*?&]/.test(password) ?
'<i class="fas fa-check text-success"></i> At least one symbol (@$!%*?&)' :
'<i class="fas fa-times text-danger"></i> At least one symbol (@$!%*?&)';
// Check overall validity and update the error message
if (strongPasswordRegex.test(password)) {
errorMessage.textContent = 'Strong Password';
errorMessage.classList.remove('text-danger');
errorMessage.classList.add('text-success');
} else {
errorMessage.textContent = 'Weak Password';
errorMessage.classList.remove('text-success');
errorMessage.classList.add('text-danger');
}
}
</script>
</body>
</html>