JavaScript Form Validation: Real-Time Input Checks & Regular Expressions

Form Validation is a foundational responsibility of client-side JavaScript. It verifies that user inputs satisfy data integrity requirements (such as valid email formats, strong passwords, and required fields) before dispatching network payloads to backend servers.

Complete Interactive Validation Example

// Select form and input fields
const signupForm = document.getElementById("registration-form");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const errorBox = document.getElementById("error-summary");

signupForm.addEventListener("submit", (e) => {
    // 1. Prevent default form submission reload
    e.preventDefault();
    
    const errors = [];
    
    // 2. Validate Email Format using RegEx
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailInput.value.trim())) {
        errors.push("Please provide a valid email address (e.g., user@domain.com).");
    }
    
    // 3. Validate Password Strength (Min 8 chars, 1 digit, 1 special character)
    const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
    if (!passwordPattern.test(passwordInput.value)) {
        errors.push("Password must be at least 8 characters with at least 1 number and 1 special symbol.");
    }
    
    // 4. Render Feedback or Proceed
    if (errors.length > 0) {
        errorBox.innerHTML = errors.map(err => `<p class="text-danger">${err}</p>`).join("");
        errorBox.classList.remove("hidden");
    } else {
        errorBox.classList.add("hidden");
        console.log("Validation Successful! Dispatching payload to server...");
        // Call backend API via fetch()
    }
});