JavaScript Form Validation - Real-Time Validation

Real-time form validation is essential to provide a better user experience and ensure that user input is correct and meets the required criteria. In this guide, we'll explore how to perform real-time form validation using JavaScript and provide sample code to demonstrate the process.

HTML Form

First, let's create a simple HTML form that we want to validate in real-time:

<form id=`validation-form`>
    <label for=`username`>Username:</label>
    <input type=`text` id=`username` name=`username` required>
    <span id=`username-error` class=`error`></span>
    <label for=`email`>Email:</label>
    <input type=`email` id=`email` name=`email` required>
    <span id=`email-error` class=`error`></span>
    <input type=`submit` value=`Submit`>
</form>
    

JavaScript Real-Time Validation

Now, let's write JavaScript code to perform real-time validation of the form fields as the user types:

const form = document.getElementById('validation-form');
const usernameInput = document.getElementById('username');
const emailInput = document.getElementById('email');
const usernameError = document.getElementById('username-error');
const emailError = document.getElementById('email-error');
usernameInput.addEventListener('input', function () {
    if (usernameInput.validity.valid) {
        usernameError.textContent = '';
        usernameError.classList.remove('error');
        usernameError.classList.add('success');
    } else {
        showError(usernameInput, usernameError, 'Username is required.');
    }
});
emailInput.addEventListener('input', function () {
    if (emailInput.validity.valid) {
        emailError.textContent = '';
        emailError.classList.remove('error');
        emailError.classList.add('success');
    } else {
        showError(emailInput, emailError, 'Please enter a valid email address.');
    }
});
form.addEventListener('submit', function (event) {
    if (!usernameInput.validity.valid) {
        showError(usernameInput, usernameError, 'Username is required.');
        event.preventDefault();
    }
    if (!emailInput.validity.valid) {
        showError(emailInput, emailError, 'Please enter a valid email address.');
        event.preventDefault();
    }
});
function showError(input, errorElement, message) {
    errorElement.textContent = message;
    errorElement.classList.remove('success');
    errorElement.classList.add('error');
}
    

Conclusion

Real-time form validation using JavaScript enhances the user experience by providing immediate feedback to users as they fill out a form. It ensures that user input is accurate and meets the required criteria.

Implement real-time form validation in your web applications to create user-friendly and error-free form submissions.