Create a Password Validator using Tailwind CSS

Last Updated : 27 Feb, 2024

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 the conditions as its parameters.

Prerequisites

Approach

HTML Structure: Defines a password input field and a list of password strength criteria.
Tailwind CSS Styling: Applies styles for layout, input fields, buttons, and icons using Tailwind CSS utility classes.
Password Visibility Toggle: Allows users to toggle password visibility with the eye icon button.
Password Strength Validation: Uses jQuery to listen for input changes in the password field and validates the password against criteria such as minimum length, presence of uppercase and lowercase letters, and symbols.
Feedback Display: Updates the UI dynamically to display feedback on whether the password meets the required criteria and indicates its strength as either strong or weak.

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>
    <!-- Tailwind CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.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 class="bg-gray-100 flex justify-center items-center h-screen">
    <div class="bg-white shadow-md rounded-md p-4 w-full md:w-1/2">
        <h2 class="text-xl font-bold mb-4 text-center">
              Checking Password Strength in JavaScript
          </h2>
        <div class="mb-4">
            <label for="password" class="block">
                  Enter Password:
              </label>
            <div class="flex items-center">
                <input type="password" class="border border-gray-300
                 form-input flex-1" id="password">
                <button class="ml-2 px-3 py-2 border border-gray-300
                 rounded-md bg-white text-gray-600 " type="button"
                        id="togglePassword">
                    <i class="fas fa-eye"></i>
                </button>
            </div>
        </div>
        <div class="mb-4">
            <ul>
                <li id="minLength"><i class="fas fa-times 
                    text-red-500"></i> Minimum 8 characters</li>
                <li id="uppercase"><i class="fas fa-times 
                    text-red-500"></i> At least one uppercase letter</li>
                <li id="lowercase"><i class="fas fa-times
                     text-red-500"></i> At least one lowercase letter</li>
                <li id="symbol"><i class="fas fa-times
                     text-red-500"></i> At least one symbol (@$!%*?&)</li>
            </ul>
        </div>
        <span id="errorMessage" class="font-semibold text-red-500"></span>
    </div>
 
    <!-- jQuery -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.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
        $('#togglePassword').click(function () {
            const passwordInput = $('#password');
            const icon = $(this).find('i');
 
            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                passwordInput.attr('type', 'password');
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });
 
        $('#password').on('input', function () {
            const password = $(this).val();
            const strongPasswordRegex = 
                  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
            const errorMessage = $('#errorMessage');
 
            $('#minLength').html(password.length >= 8 ?
                '<i class="fas fa-check text-green-500"></i> Minimum 8 characters' :
                '<i class="fas fa-times text-red-500"></i> Minimum 8 characters');
            $('#uppercase').html(/[A-Z]/.test(password) ?
                '<i class="fas fa-check text-green-500"></i> At least one uppercase letter' :
                '<i class="fas fa-times text-red-500"></i> At least one uppercase letter');
            $('#lowercase').html(/[a-z]/.test(password) ?
                '<i class="fas fa-check text-green-500"></i> At least one lowercase letter' :
                '<i class="fas fa-times text-red-500"></i> At least one lowercase letter');
            $('#symbol').html(/[@$!%*?&]/.test(password) ?
                '<i class="fas fa-check text-green-500"></i> At least one symbol (@$!%*?&)' :
                '<i class="fas fa-times text-red-500"></i> At least one symbol (@$!%*?&)');
 
            if (strongPasswordRegex.test(password)) {
                errorMessage.text('Strong Password').removeClass('text-red-500')
                    .addClass('text-green-500');
            } else {
                errorMessage.text('Weak Password').removeClass('text-green-500')
                    .addClass('text-red-500');
            }
        });
    </script>
</body>
 
</html>