JavaScript: Validate an Email Address

Author:

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

  1. Initialize the Email String: Accept or define the email address to validate.
  2. Create a Regular Expression (Regex):
    • Define a regular expression to match the common pattern of email addresses.
  3. Validate the Email:
    • Use the test() method to check if the email matches the regex pattern.
  4. 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:

JavaScript: Add Two Numbers JavaScript: Subtract Two Numbers JavaScript: Multiply Two Numbers JavaScript: Divide Two Numbers JavaScript: Find the Remainder of Two Numbers JavaScript: Check if a Number is Even or Odd JavaScript: Find the Largest Among Three Numbers JavaScript: Find the Smallest Among Three Numbers JavaScript: Check if a Number is Prime JavaScript: Find the Factorial of a Number JavaScript: Print the Fibonacci Series JavaScript: Reverse a String JavaScript: Check if a String is a Palindrome JavaScript: Convert Celsius to Fahrenheit JavaScript: Convert Fahrenheit to Celsius JavaScript: Find the Area of a Circle JavaScript: Find the Perimeter of a Rectangle JavaScript: Sort an Array JavaScript: Find the Maximum and Minimum Element in an Array JavaScript: Find the Sum of Elements in an Array JavaScript: Merge Two Arrays JavaScript: Remove Duplicates from an Array JavaScript: Count the Occurrences of an Element in an Array JavaScript: Search for an Element in an Array JavaScript: Implement the Bubble Sort Algorithm JavaScript: Implement the Quick Sort Algorithm JavaScript: Implement the Insertion Sort Algorithm JavaScript: Check if a String Contains Another String JavaScript: Split a String into an Array of Words JavaScript: Join an Array of Words into a String JavaScript: Check if Two Strings are Anagrams JavaScript: Implement a Basic Calculator JavaScript: Get the Current Date and Time JavaScript: Implement a Countdown Timer JavaScript: Validate an Email Address JavaScript: Validate a Phone Number JavaScript: Swap Two Variables JavaScript: Count the Number of Words in a String JavaScript: Implement a Stack using Arrays / Objects JavaScript: Implement a Queue using Arrays / Objects JavaScript: Depth-First Search (DFS) on a Graph JavaScript: Breadth-First Search (BFS) on a Graph JavaScript: Implement a Binary Search Tree JavaScript: Detect a Cycle in a Linked List JavaScript: Implement the Tower of Hanoi Algorithm JavaScript: Search for an Element in a Binary Search Tree JavaScript: Implement a Priority Queue JavaScript: Implement an AVL Tree JavaScript: Implement a Circular Queue using Arrays JavaScript: Implement a Doubly Linked List JavaScript Function: Sum of Two Numbers JavaScript: Convert a String to Title Case JavaScript: Reverse a String without Built-in reverse() Function JavaScript: Reverse the Words in a Sentence without Built-in Function

Comments

Post a Comment

Leave Comment