Introduction

Email validation is an important part of web development. It ensures that the user enters a valid email address that adheres to the correct format. You can validate an email address in JavaScript using regular expressions (regex). This guide will walk you through writing a JavaScript program to validate an email address.

Problem Statement

Create a JavaScript program that:

Accepts an email address from the user.
Validates whether the email address is in the correct format.
Displays whether the email is valid or invalid.

Example:

Input: "example@example.com"
Output: The email address is valid.
Input: "invalid-email"
Output: The email address is invalid.

Solution Steps

Initialize the Email String: Accept or define the email address to validate.
Create a Regular Expression (Regex):
- Define a regular expression to match the common pattern of email addresses.
Validate the Email:
- Use the test() method to check if the email matches the regex pattern.
Display the Result: Output whether the email is valid or invalid.

JavaScript Program

// JavaScript Program to Validate an Email Address
// Author: https://www.rameshfadatare.com/

function validateEmail(email) {
    // Step 2: Define the regular expression for validating email addresses
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    // Step 3: Test the email against the regex
    if (emailPattern.test(email)) {
        console.log("The email address is valid.");
    } else {
        console.log("The email address is invalid.");
    }
}

// Example usage
const email = "example@example.com";
validateEmail(email);

Explanation

Step 1: Define the Regular Expression

The regular expression used in this program is:
```
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
```
This regex matches most valid email addresses:
- ^[a-zA-Z0-9._%+-]+: The username part can contain letters, numbers, dots, underscores, percent signs, plus signs, and hyphens.
- @[a-zA-Z0-9.-]+: The domain name part can contain letters, numbers, dots, and hyphens.
- \.[a-zA-Z]{2,}$: The top-level domain part should contain at least two letters.

Step 2: Test the Email Address

The test() method is used to check if the email matches the regex pattern. If it does, the email is valid; otherwise, it is invalid.

Output Example

The email address is valid.

Example with Invalid Input

const email = "invalid-email";
validateEmail(email);

Output:

The email address is invalid.

HTML Example with User Input

You can also validate an email address using a form input in HTML and JavaScript.

HTML and JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Validator</title>
</head>
<body>
    <h1>Email Validator</h1>
    <input type="text" id="emailInput" placeholder="Enter your email">
    <button onclick="validateEmail()">Validate</button>
    <p id="result"></p>

    <script>
        function validateEmail() {
            const email = document.getElementById("emailInput").value;
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

            if (emailPattern.test(email)) {
                document.getElementById("result").textContent = "The email address is valid.";
            } else {
                document.getElementById("result").textContent = "The email address is invalid.";
            }
        }
    </script>
</body>
</html>

Explanation of HTML Example

The user enters an email address in the input field, and when the "Validate" button is clicked, the validateEmail() function is called to check if the email is valid.
The result is displayed in the <p> element with the id="result".

Output in Browser

When the user enters a valid email, the message "The email address is valid." will be displayed. If the email is invalid, the message "The email address is invalid." will appear.

Conclusion

This JavaScript program demonstrates how to validate an email address using regular expressions. By using a regex pattern, you can effectively check if the email follows the standard email format. You can also extend the validation to HTML form inputs to provide real-time feedback to users.

Related JavaScript Programs:

Java Guides

Search This Blog

JavaScript: Validate an Email Address