Forms & Validation — Programuoki

Code

js/forms.js — live validation

In the code column — js/forms.js, and in it attachLiveValidation, which implements the progression. Read the blur and input listeners side by side:

el.addEventListener('blur', () => {           // (2) leave a field → validate it
  touched.add(el.name);
  validateField(el.name);
});

el.addEventListener('input', () => {          // (3) typing → validate ONLY if already touched
  if (touched.has(el.name)) validateField(el.name);
});

The whole trick is the touched Set. A field becomes "touched" only when you leave it (or submit the form). And the input listener validates only touched fields. So:

Until you leave a field — silence (no nagging while you type it the first time).
Leave it with an error → the field is "touched" → from now every keystroke validates, and the error clears the moment you fix it.

validateAll() (the returned function) is called on submit: it validates everything and marks all fields "touched", so from then on feedback is live.

Settings that work. settings.js ties this to state: fillForm fills from getSettings(), and on submit saveSettings(...) persists to localStorage AND applyTheme(...) changes the theme immediately. Settings aren't decoration; they change the app and persist. (settings-store.js holds DEFAULT_SETTINGS; theme.js holds applyTheme.)

Verify. In the settings form:

1. Leave "Display name" empty → the error appears (blur).
2. Start typing → the error clears immediately (touched → live).
3. Save → the theme changes, and the values survive a reload.

Gotcha (CSS — a real bug we hit). We styled inputs like this:
input[type="text"] { ... }        /* ← only type="text" */
input[type="text"] is an exact-match selector — it does not style type="email", type="url", type="password". Half the fields (email, URL, password) looked different. The fix is to style by "everything except the toggles":
input:not([type="checkbox"]):not([type="radio"]) { ... }
That catches every text-like type at once, and leaves checkbox/radio (which have their own look) alone.

forms.js CREATE

Create this file in js/

// Shared form helpers — used by settings, contact and register.
// The heart of this file is attachLiveValidation, which encodes the UX
// progression: validate on submit → on blur → on keystroke-once-in-error.

import { validateFields, hasErrors } from './validation.js';

/** Show/clear the error under a field, and mark the input invalid */
export function setFieldError(form, field, message) {
  const input = form.querySelector(`[name="${field}"]`);
  const errorEl = form.querySelector(`[data-error-for="${field}"]`);
  if (errorEl) errorEl.textContent = message || '';
  if (input) {
    input.classList.toggle('invalid', Boolean(message));
    input.setAttribute('aria-invalid', message ? 'true' : 'false');   // a11y
  }
}

/** Read a form's values into an object (checkboxes → booleans) */
export function readForm(form) {
  const values = {};
  form.querySelectorAll('input, textarea, select').forEach(el => {
    if (!el.name) return;
    values[el.name] = el.type === 'checkbox' ? el.checked : el.value;
  });
  return values;
}

/**
 * Attach LIVE validation — the progression we teach:
 *   1. on SUBMIT   — validateAll() (returned below). Simple, but late.
 *   2. on BLUR     — validate a field as soon as they leave it.
 *   3. on INPUT    — re-validate ONLY if the field already showed an error,
 *                    so it clears the moment they fix it.
 * Validating on keystroke from the START is hostile ("Email is invalid" after
 * one letter). After you've already complained, it's helpful. That's the judgment.
 */
export function attachLiveValidation(form, getRules) {
  const touched = new Set();

  form.querySelectorAll('input, textarea, select').forEach(el => {
    if (!el.name) return;

    el.addEventListener('blur', () => {          // (2) leaving marks it touched
      touched.add(el.name);
      validateField(el.name);
    });

    el.addEventListener('input', () => {          // (3) re-check only if already in error
      if (touched.has(el.name)) validateField(el.name);
    });
  });

  function validateField(name) {
    const errors = validateFields(readForm(form), getRules(readForm(form)));
    setFieldError(form, name, errors[name] || '');
  }

  return function validateAll() {                 // (1) call this on submit
    const values = readForm(form);
    const errors = validateFields(values, getRules(values));
    Object.keys(values).forEach(n => touched.add(n));   // now every field is live
    if (hasErrors(errors)) {
      Object.entries(errors).forEach(([f, m]) => setFieldError(form, f, m));
      return { ok: false, values, errors };
    }
    return { ok: true, values, errors: {} };
  };
}