<!DOCTYPE html>
<html>
<head>
    <title>Email Validation Example</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>

    <h2>Email Validation Example</h2>
    
    <form id="emailForm" onsubmit="return validateEmail()">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email">
        <span id="emailError" class="error"></span>

        <br>

        <input type="submit" value="Submit">
    </form>

    <script>
        function isValidEmail(email) {
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }

        function validateEmail() {
            var email = document.getElementById('email').value;
            var emailError = document.getElementById('emailError');
            
            // Reset error message
            emailError.innerHTML = "";

            // Validate Email
            if (email === "") {
                emailError.innerHTML = "Email is required";
                return false;
            } else if (!isValidEmail(email)) {
                emailError.innerHTML = "Invalid email format";
                return false;
            }

            // Form is valid
            alert("Email submitted successfully!");
            return true;
        }
    </script>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.