Password Validation with jQuery

Give users live feedback about a password policy while they type. This page preserves the original requirements: uppercase, lowercase, special character, number and minimum length.

Password Requirements Top ↑

• At least one uppercase letter.
• At least one lowercase letter.
• At least one number.
• At least one special character.
• At least 8 characters.

HTML Top ↑

<input type="password"
       id="t1"
       name="my_text"
       autocomplete="new-password">

<ul id="password_rules">
    <li id="d12">One uppercase letter</li>
    <li id="d13">One lowercase letter</li>
    <li id="d14">One special character</li>
    <li id="d15">One number</li>
    <li id="d16">At least 8 characters</li>
</ul>

Validation Patterns Top ↑

const checks = {
    uppercase: /[A-Z]/,
    lowercase: /[a-z]/,
    number: /[0-9]/,
    special: /[^A-Za-z0-9\s]/
};

Live Validation Top ↑

$( "#t1" ).on( "input", function () {
    const value = $( this ).val();

    const results = {
        d12: /[A-Z]/.test( value ),
        d13: /[a-z]/.test( value ),
        d14: /[^A-Za-z0-9\s]/.test( value ),
        d15: /[0-9]/.test( value ),
        d16: value.length >= 8
    };

    $.each(
        results,
        function ( id, valid ) {
            $( "#" + id )
                .toggleClass(
                    "text-success",
                    valid
                )
                .toggleClass(
                    "text-danger",
                    !valid
                );
        }
    );
});

Focus and Blur Guidance Top ↑

$( "#t1" )
    .on( "focus", function () {
        $( "#password_rules" ).show();
    })
    .on( "blur", function () {
        $( "#password_rules" ).hide();
    });

Live demo: password validation →

Bootstrap password-validation demo →

Server-side validation remains required. See PHP string checking.

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• event-keyup.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: