Password Validation Demo

Type a password to see each rule update immediately.

• One uppercase letter
• One lowercase letter
• One special character
• One number
• At least 8 characters

jQuery Top ↑

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

        const rules = {
            "#rule-upper":
                /[A-Z]/.test( value ),
            "#rule-lower":
                /[a-z]/.test( value ),
            "#rule-special":
                /[^A-Za-z0-9\s]/.test( value ),
            "#rule-number":
                /[0-9]/.test( value ),
            "#rule-length":
                value.length >= 8
        };

        let valid = true;

        $.each(
            rules,
            function ( selector, pass ) {
                valid = valid && pass;

                $( selector )
                    .toggleClass(
                        "text-success",
                        pass
                    )
                    .toggleClass(
                        "text-danger",
                        !pass
                    );
            }
        );

        $( "#password-demo-status" ).text(
            valid
                ? "All requirements are met."
                : "Password requirements are not complete."
        );
    });

Bootstrap version of the password-validation demo

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: