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

    <h2>Real-Time Validation Example</h2>
    
    <form id="realTimeForm">
        <label for="realTimeInput">Real-Time Input:</label>
        <input type="text" id="realTimeInput" name="realTimeInput">
        <span id="realTimeError" class="error"></span>

        <br>

        <!-- Other form elements can be added here -->

    </form>

    <script>
        var realTimeInput = document.getElementById('realTimeInput');
        var realTimeError = document.getElementById('realTimeError');

        realTimeInput.addEventListener('input', function () {
            var inputValue = realTimeInput.value;
            
            // Reset error message
            realTimeError.innerHTML = "";

            // Validate Input (Example: Minimum length of 3 characters)
            if (inputValue.length < 3) {
                realTimeError.innerHTML = "Input must be at least 3 characters";
            }
        });
    </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.