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>