JavaScript - How to Validate Form Using Regular Expression?

Last Updated : 03 Dec, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

To validate a form in JavaScript, you can use Regular Expressions (RegExp) to ensure that user input follows the correct format. In this article, we'll explore how to validate common form fields such as email, phone number, and password using RegExp patterns.

1. Validating an Email Address

One of the most common form fields to validate is the email address. We can use a RegExp pattern to ensure the email is in the correct format.

JavaScript 
let regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let mail = "test@example.com";

if (regex.test(mail)) {
    console.log("Valid email address");
} else {
    console.log("Invalid email address");
}

Output
Valid email address
  • ^[a-zA-Z0-9._%+-]+: Matches the local part (before the @) which can include letters, numbers, and certain special characters like ., %, +, -.
  • @[a-zA-Z0-9.-]+: Matches the domain part (after the @), which can contain letters, numbers, hyphens, and periods.
  • \.[a-zA-Z]{2,}$: Ensures the email ends with a valid top-level domain (e.g., .com, .org).

2. Validating a Phone Number

Next, let's validate a phone number. Phone number formats vary by region, but we’ll use a basic pattern to validate a typical 10-digit phone number.

JavaScript 
let regex = /^\d{10}$/;
let phone = "1234567890";

if (regex.test(phone)) {
    console.log("Valid phone number");
} else {
    console.log("Invalid phone number");
}

Output
Valid phone number

^\d{10}$: Matches exactly 10 digits. The \d stands for a digit, and {10} ensures exactly 10 digits are present.

3. Validating a Password

Passwords often require certain criteria to be met, such as a minimum length, at least one uppercase letter, one lowercase letter, and a number. We can use a RegExp to validate these conditions.

JavaScript 
let regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
let pass = "Password123";

if (regex.test(pass)) {
    console.log("Valid password");
} else {
    console.log("Invalid password");
}

Output
Valid password
  • ^(?=.*[a-z]): Ensures at least one lowercase letter.
  • (?=.*[A-Z]): Ensures at least one uppercase letter.
  • (?=.*\d): Ensures at least one digit.
  • [a-zA-Z\d]{8,}$: Ensures the password is at least 8 characters long and only contains letters and digits.

4. Validating a Username

Usernames often have specific rules, such as no spaces, must start with a letter, and can only contain letters, numbers, and underscores. Here's how to validate that.

JavaScript 
let regex = /^[a-zA-Z][a-zA-Z0-9_]{5,19}$/;
let uName = "user_123";

if (regex.test(uName)) {
    console.log("Valid username");
} else {
    console.log("Invalid username");
}
  • ^[a-zA-Z]: Ensures the username starts with a letter.
  • [a-zA-Z0-9_]{5,19}$: Ensures the username is between 6 to 20 characters long and can contain letters, numbers, and underscores.

5. Validating a URL

For form fields where users need to input a URL, we can use a regular expression to ensure the URL is in the correct format.

JavaScript 
let regex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
let url = "https://www.example.com";

if (regex.test(url)) {
    console.log("Valid URL");
} else {
    console.log("Invalid URL");
}

Output
Valid URL
  • ^(https?|ftp):\/\/: Matches the protocol (http, https, or ftp) followed by ://.
  • [^\s/$.?#].[^\s]*$: Ensures the rest of the URL is properly formed, including domain, path, and query parameters.

Integrating Form Validation with HTML

To validate the form inputs, you can call the above RegExp checks when the user submits the form. Here’s an example of how to implement form validation using JavaScript

HTML 
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        .form-container {
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>

    <div class="form-container">
        <h2>Form Validation</h2>
        <form id="myForm">
            <input type="email" id="email" placeholder="Enter your email" required />
            <input type="text" id="phone" placeholder="Enter your phone number" required />
            <input type="password" id="password" placeholder="Enter your password" required />
            <button type="submit">Submit</button>
        </form>
    </div>

    <script>
        document.getElementById("myForm").addEventListener("submit", function (event) {
            event.preventDefault(); // Prevent the form from submitting

            // Get the values from the form
            let email = document.getElementById("email").value;
            let phone = document.getElementById("phone").value;
            let password = document.getElementById("password").value;

            // Regular Expressions for validation
            let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            let phoneRegex = /^\d{10}$/;
            let passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{8,}$/;

            // Validate email
            if (!emailRegex.test(email)) {
                alert("Invalid email address!");
                return;
            }

            // Validate phone number
            if (!phoneRegex.test(phone)) {
                alert("Invalid phone number. Must be 10 digits.");
                return;
            }

            // Validate password
            if (!passwordRegex.test(password)) {
                alert("Password must be at least 8 characters, including uppercase, lowercase, a number, and a symbol.");
                return;
            }

            // If all validations pass
            alert("Form submitted successfully!");

            // Clear the form after successful submission
            document.getElementById("myForm").reset();
        });
    </script>

</body>

</html>
  • This script listens for the form submission event and prevents the default behavior using event.preventDefault().
  • It checks the email, phone number, and password fields using the corresponding RegExp patterns.
  • If any field fails validation, an alert message is shown. If all validations pass, the form is considered successfully submitted.

Next Article
JavaScript - How to Validate Form Using Regular Expression?

B
bhagavatulaprathyusha
Improve
Article Tags :

Similar Reads