How to validate confirm password using JavaScript ?

Validate a password using HTML and JavaScript

Last Updated : 30 Sep, 2024

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 submission.

A password is correct if it contains:

At least 1 uppercase character.
At least 1 lowercase character.
At least 1 digit.
At least 1 special character.
Minimum 8 characters.

Approach :

Retrieve Input Value: The test_str() function retrieves the value from the input field with id="t1" using document.getElementById().
Check Password Criteria: Regular expressions are used to check for lowercase, uppercase, digits, special characters, and minimum length of 8 characters.
Set Validation Result: If all conditions are met, the result is set to "TRUE"; otherwise, it is set to "FALSE".
Display Output: The result is displayed in a readonly input field with id="t2", showing whether the password is valid or not.

Example: In this example we are following above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>validate password</title>
    <script type="text/javascript">
        function test_str() {
            let res;
            let str =
                document.getElementById("t1").value;
            if (str.match(/[a-z]/g) && str.match(
                /[A-Z]/g) && str.match(
                    /[0-9]/g) && str.match(
                        /[^a-zA-Z\d]/g) && str.length >= 8)
                res = "TRUE";
            else
                res = "FALSE";
            document.getElementById("t2").value = res;

        }
    </script>
</head>

<body>
    <p>
        String:
        <input type="text" placeholder="abc" id="t1" />
        <br />
        <br />
        <input type="button" value="Check" onclick="test_str()" />
        <br />
        <br /> Output:
        <input type="text" id="t2" readonly />
    </p>
</body>

</html>

Output:

Password-validation — Validate a password using HTML and JavaScript Example Output

How to validate confirm password using JavaScript ?

A

AnmolAgarwal

Improve

Article Tags :

Similar Reads

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

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

Create a Password Validator using Bootstrap & JavaScript

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. PrerequisitesHTMLBootstrapJavaScriptApproac

How to Toggle Password Visibility using HTML and JavaScript ?

In this article, we will learn about how to toggle password visibility using HTML and JavaScript. Passwords are those input types that take hidden inputs. It can be shown and hidden from the user by toggling its type between text and password. Approach The following approach will be implemented to t

Show And Hide Password Using JavaScript

When creating login or registration forms, a common feature is the ability to show and hide passwords. This improves user experience by allowing users to verify their input before submitting the form.What We're Going to CreateWe will create a "Password Hide and Show" feature that will allow users to

Build a PIN Pad using HTML CSS & JavaScript

In this article, we will see how to implement a PIN pad for entering and checking whether the PIN is valid with the help of HTML, CSS, and JavaScript. Here, we have provided a numeric keypad/PIN pad through which the user can input the PIN. Once the user enters a PIN and hits "OK", the code validate

OTP Generator and Validator Card using JavaScript & Tailwind CSS

OTP (One-Time Password) generator and validator built using Tailwind CSS and JavaScript allows users to generate a random OTP and validate it against the entered OTP. The application has a user-friendly interface for generating and validating OTPs using JavaScript for interactivity and Tailwind CSS

How to Generate a Random Password using JavaScript?

Creating a random password generator is an excellent beginner-friendly project that can be useful in real-world applications. Passwords are vital for securing accounts, and strong, randomized passwords enhance security significantly. How to Generate a Random Password using JavaScriptWhat We're Going

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

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