JavaScript Application For Email Validation

Last Updated : 23 Jul, 2025

The Email Validation Project in JavaScript aims to create an efficient system for verifying the authenticity and format of email addresses. This tool ensures data accuracy, reduces errors, and enhances the user experience by preventing invalid email submissions.

Project Preview

Screenshot-2025-01-06-103407 — Email validation Application in JavaScript

What Will You Learn?

We’ll build an application that allows users to

Enter an email address in an input field.
Validate the entered email against a regular expression.
Display an error message if the email format is invalid.
Provide visual feedback when the email is valid or invalid.

The application will include a clean user interface and provide instant feedback to the user.

Email validation App - HTML and CSS

This HTML code creates a simple email validation form. It allows users to enter their email address. This CSS code provides styling for the email validation form, ensuring a clean and modern look.

HTML

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 8px;
            font-size: 16px;
        }
        input[type="text"] {
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .error-message {
            color: red;
            font-size: 14px;
            display: none;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Email Validation Form</h2>
        <form id="emailForm">
            <label for="email">Enter your email:</label>
            <input type="text" id="email" name="email" placeholder="example@domain.com" required>
            <span id="error-message" class="error-message"></span>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

In this code

The container centers the form and applies styling for a clean and modern design.
The input field allows users to enter their email address, with a placeholder for guidance.
The error-message span displays validation errors dynamically.
The submit button triggers the validation logic.
CSS provides styles for responsiveness, error highlighting, and hover effects.

Email validation App - JavaScript Logic

This JavaScript code handles email validation for the form submission. It checks if the entered email matches a specified pattern and displays an error message if the format is incorrect.

JavaScript

document.getElementById("emailForm").addEventListener("submit", function (event) {
    event.preventDefault();

    const email = document.getElementById("email").value;
    const errMsg = document.getElementById("error-message");

    const pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (pattern.test(email)) {
        errMsg.style.display = "none";
        alert("Email is valid! Form Submitted.");
        document.getElementById("emailForm").reset();
    } else {
        errMsg.style.display = "block";
        errMsg.textContent = "Please enter a valid email address.";
    }
});

In this code

The form is selected using its ID, and an event listener is added to handle submissions.
The emailPattern regular expression checks the validity of the entered email address.
If the email is valid, an alert confirms the submission, and the form resets.
If invalid, an error message is displayed dynamically below the input field.

Complete Code

HTML

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 8px;
            font-size: 16px;
        }
        input[type="text"] {
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .error-message {
            color: red;
            font-size: 14px;
            display: none;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Email Validation Form</h2>
        <form id="emailForm">
            <label for="email">Enter your email:</label>
            <input type="text" id="email" name="email" placeholder="example@domain.com" required>
            <span id="error-message" class="error-message"></span>
            <button type="submit">Submit</button>
        </form>
    </div>
    <script>
        document.getElementById("emailForm").addEventListener("submit", function (event) {
            event.preventDefault();

            const email = document.getElementById("email").value;
            const errMsg = document.getElementById("error-message");

            const pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

            if (pattern.test(email)) {
                errMsg.style.display = "none";
                alert("Email is valid! Form Submitted.");
                document.getElementById("emailForm").reset();
            } else {
                errMsg.style.display = "block";
                errMsg.textContent = "Please enter a valid email address.";
            }
        });
    </script>
</body>
</html>

How to create form validation by using only HTML ?

pranjalonj7

Improve

Article Tags :