📝 Form Events and Validation

Forms Are Conversations

Think of a form as a back-and-forth conversation. The user types (a message to you), and a good form replies right away — "that email looks valid," "passwords don't match yet," "you have 40 characters left." Each user action is a form event you can respond to, and each response is a chance to guide them to a successful submission.

The Core Form Events

Five events cover the vast majority of form work. Knowing exactly when each fires is the whole game.

input vs change

const search = document.querySelector('#search');

// input: fires on EVERY change — great for live feedback
search.addEventListener('input', (e) => {
    filterResults(e.target.value);
});

// change: fires only when the value is "committed"
const country = document.querySelector('#country');
country.addEventListener('change', (e) => {
    loadStatesFor(e.target.value);   // ideal for a select
});

A live character counter

const message = document.querySelector('#message');
const counter = document.querySelector('#char-count');
const MAX = 280;

message.addEventListener('input', (e) => {
    const remaining = MAX - e.target.value.length;
    counter.textContent = `${remaining} characters remaining`;
    counter.classList.toggle('low', remaining < 20);   // style via CSS, not inline
});

Focus & blur for guidance

document.querySelectorAll('.field input').forEach((input) => {
    input.addEventListener('focus', (e) => {
        e.target.closest('.field').classList.add('is-focused');
    });
    input.addEventListener('blur', (e) => {
        e.target.closest('.field').classList.remove('is-focused');
        validateField(e.target);      // validate once they move on
    });
});

Submit & FormData

The submit event is the moment of truth. Attach it to the <form> (not the button) so both clicking Submit and pressing Enter are caught, call preventDefault() to stop the full-page reload, and read the fields with FormData.

const form = document.querySelector('#contact-form');

form.addEventListener('submit', async (e) => {
    e.preventDefault();                       // no page reload

    // FormData gathers every field with a `name` attribute
    const data = new FormData(form);

    // Read individual values…
    const email = data.get('email');
    // …or convert the whole form to a plain object:
    const payload = Object.fromEntries(data.entries());

    // Send it with fetch (covered fully in a later lesson)
    const res = await fetch(form.action, {
        method: 'POST',
        body: data
    });

    if (res.ok) {
        form.reset();
        showMessage('Thanks! We got your message.', 'success');
    } else {
        showMessage('Something went wrong. Please try again.', 'error');
    }
});

const btn = form.querySelector('button[type="submit"]');
btn.disabled = true;
btn.textContent = 'Sending…';
// …after the fetch resolves (in a finally block):
btn.disabled = false;
btn.textContent = 'Send';

HTML5 & the Validation API

Before writing any JavaScript, lean on the browser. HTML5 gives you declarative validation attributes for free, and they're accessible and localized out of the box.

<form id="signup">
    <input type="text"  name="username" required minlength="3" maxlength="20">
    <input type="email" name="email" required>
    <input type="text"  name="zip" pattern="[0-9]{5}" title="5-digit ZIP code">
    <input type="number" name="age" min="18" max="120">
    <input type="url"   name="website" placeholder="https://example.com">
    <button type="submit">Create account</button>
</form>

The Constraint Validation API lets JavaScript read and control this built-in validity so you can style and message it yourself.

const form = document.querySelector('#signup');

form.addEventListener('submit', (e) => {
    // checkValidity() returns false and fires 'invalid' on bad fields
    if (!form.checkValidity()) {
        e.preventDefault();
        form.reportValidity();     // show the browser's native messages
    }
});

// Inspect a single field's validity state
const username = form.elements.username;
username.addEventListener('invalid', (e) => {
    const v = e.target.validity;
    if (v.valueMissing)   e.target.setCustomValidity('Username is required.');
    else if (v.tooShort)  e.target.setCustomValidity('At least 3 characters, please.');
    else                  e.target.setCustomValidity('');   // clear
});
// Always clear the custom message on input, or it sticks:
username.addEventListener('input', (e) => e.target.setCustomValidity(''));

Custom Real-Time Validation

When you need rules HTML5 can't express — password strength, "username already taken," matching fields — write your own. A clean approach keeps rules as small, testable functions and reuses one display routine.

A reusable field validator

// Each rule: a test function + the message to show when it fails.
const rules = {
    username: [
        { test: (v) => v.length >= 3,            msg: 'At least 3 characters.' },
        { test: (v) => /^[a-zA-Z0-9_]+$/.test(v), msg: 'Letters, numbers, and _ only.' }
    ],
    email: [
        { test: (v) => v.trim() !== '',          msg: 'Email is required.' },
        { test: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), msg: 'Enter a valid email.' }
    ],
    password: [
        { test: (v) => v.length >= 8,  msg: 'At least 8 characters.' },
        { test: (v) => /[A-Z]/.test(v), msg: 'Add an uppercase letter.' },
        { test: (v) => /[0-9]/.test(v), msg: 'Add a number.' }
    ]
};

function validateField(field) {
    const fieldRules = rules[field.name] || [];
    for (const rule of fieldRules) {
        if (!rule.test(field.value)) {
            showError(field, rule.msg);      // first failing rule wins
            return false;
        }
    }
    clearError(field);
    return true;
}

Wiring it up (blur first, then live)

const form = document.querySelector('#signup');

Object.keys(rules).forEach((name) => {
    const field = form.elements[name];
    // Validate when they leave the field…
    field.addEventListener('blur', () => validateField(field));
    // …and re-check live once an error is showing, so it clears as they fix it.
    field.addEventListener('input', () => {
        if (field.classList.contains('invalid')) validateField(field);
    });
});

form.addEventListener('submit', (e) => {
    const allValid = Object.keys(rules)
        .map((name) => validateField(form.elements[name]))
        .every(Boolean);                 // validate every field, don't short-circuit

    if (!allValid) {
        e.preventDefault();
        form.querySelector('.invalid')?.focus();   // send focus to the first error
    }
});

Cross-field validation: matching passwords

const password = form.elements.password;
const confirm  = form.elements.confirmPassword;

confirm.addEventListener('input', () => {
    if (confirm.value !== password.value) {
        showError(confirm, 'Passwords do not match.');
    } else {
        clearError(confirm);
    }
});

Debounced async checks

Checking "is this username taken?" hits the server, so don't fire on every keystroke — debounce it to wait until typing pauses.

function debounce(fn, delay) {
    let id;
    return (...args) => {
        clearTimeout(id);
        id = setTimeout(() => fn(...args), delay);
    };
}

const checkUsername = debounce(async (value) => {
    if (value.length < 3) return;
    const res = await fetch(`/api/username-available?u=${encodeURIComponent(value)}`);
    const { available } = await res.json();
    const field = form.elements.username;
    available ? clearError(field) : showError(field, 'That username is taken.');
}, 400);

form.elements.username.addEventListener('input', (e) => checkUsername(e.target.value));

Accessible Error Handling

Validation that only looks wrong (a red border) is invisible to screen-reader users. Tie every error to its field programmatically and announce it. Here's a showError/clearError pair that does it right.

function showError(field, message) {
    field.classList.add('invalid');
    field.setAttribute('aria-invalid', 'true');

    const errorId = `${field.name}-error`;
    let error = document.getElementById(errorId);
    if (!error) {
        error = document.createElement('p');
        error.id = errorId;
        error.className = 'error-message';
        error.setAttribute('role', 'alert');       // announced immediately
        field.insertAdjacentElement('afterend', error);
    }
    error.textContent = message;
    // Link the error to the field so assistive tech reads them together
    field.setAttribute('aria-describedby', errorId);
}

function clearError(field) {
    field.classList.remove('invalid');
    field.removeAttribute('aria-invalid');
    field.removeAttribute('aria-describedby');
    document.getElementById(`${field.name}-error`)?.remove();
}

Practice & Quiz

const login = document.querySelector('#login');
// TODO: on submit, prevent reload and log { email, password }

login.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(login).entries());
    console.log(data);   // { email: '…', password: '…' }
});

const email = document.querySelector('#email');
const note  = document.querySelector('#email-note');
const isEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);

email.addEventListener('input', (e) => {
    const v = e.target.value.trim();
    if (v === '') {
        note.textContent = '';
        note.className = 'note';
    } else if (isEmail(v)) {
        note.textContent = 'Looks good ✓';
        note.className = 'note valid';
    } else {
        note.textContent = 'Not a valid email';
        note.className = 'note invalid';
    }
});

Best Practices & Pitfalls

✅ Do

• Attach submit to the <form> and always preventDefault() when handling it yourself
• Start with HTML5 attributes; add JavaScript only for what they can't express
• Validate on blur, then re-validate live on input once an error shows
• Write specific messages ("Add a number") not vague ones ("Invalid")
• Wire errors with aria-invalid + aria-describedby and move focus to the first error
• Debounce async checks and always re-validate on the server

❌ Don't

• Listen for click on the submit button — you'll miss Enter-key submits
• Show "invalid" on the very first keystroke while the user is still typing
• Trust client validation as your security layer
• Inject user input with innerHTML — use textContent to avoid XSS
• Rely on color alone to signal an error

Summary

📚 Additional Resources

• MDN — Client-side form validation
• MDN — The FormData interface
• MDN — ValidityState

🚀 What's Next?

You've handled synchronous events all day — clicks, keystrokes, submits. But how does JavaScript juggle a network request and a click at the same time without freezing? Next up: Callbacks and the Event Loop, the model behind everything asynchronous.