Create a Password Validator using Bootstrap & JavaScript
Last Updated :
27 Feb, 2024
A password validator assesses password strength by verifying if it meets predetermined criteria like length, inclusion of uppercase and lowercase letters, digits, and symbols. It ensures robust security measures for user authentication and data protection.
Prerequisites
Approach
The provided code is a password strength checker implemented in JavaScript. It assesses password strength by evaluating length, character diversity, and complexity. It dynamically updates a list of conditions such as minimum length, presence of uppercase and lowercase letters, and symbols, displaying whether each condition is met. Additionally, it toggles password visibility and provides feedback on password strength, indicating whether it's strong or weak, along with visual cues for each condition.
Example: This example shows the implementation of the above-explained approach.
HTML
<!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>
Output:
Similar Reads
Validate a password using HTML and JavaScript Validating a password using HTML and JavaScript involves ensuring that user-entered passwords meet certain criteria, such as length, complexity, or character types (e.g., uppercase, lowercase, numbers, and symbols). This process enhances security by enforcing strong password requirements before form
2 min read
Password Validation Form Using JavaScript The password Validation form is used to check the password requirements such as the password must have at least one Uppercase, or lowercase, number, and the length of the password. We can also check this after submitting the form but it's not recommended. We can easily check before submitting the fo
4 min read
How to validate confirm password using JavaScript ? In almost every modern website we have seen a login and signup feature, which is surely an important service for both the client and the service provider. When a user signs up for a certain website they have to put in a username a password, to enter the password websites ask them to enter a password
3 min read
Create a Password Validator using Tailwind CSS Passwords must be strong so that hackers can not hack them easily. The following example shows how to check the password strength of the user input password in Tailwind CSS and jQuery. We will use the validator module to achieve this functionality. We will call the isStrongPassword function and pass
3 min read
Create a Password Validator using ReactJS Password must be strong so that hackers can not hack them easily. The following example shows how to check the password strength of the user input password in ReactJS. We will use the validator module to achieve this functionality. We will call the isStrongPassword function and pass the conditions a
2 min read