JavaScript Application For Email Validation

An Email Validation project in JavaScript focuses on verifying whether entered email addresses are correctly formatted and reliable. It improves data quality while enhancing user experience by preventing invalid submissions.

Ensures emails follow proper format and structure.
Reduces errors by blocking incorrect inputs.
Enhances user experience with instant validation feedback.

Project Preview

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

Approach

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>

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.";
    }
});

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