js/forms.js — gyva validacija

Kodo stulpelyje — js/forms.js, o jame — attachLiveValidation, kuris įgyvendina progresiją. Perskaityk blur ir input klausytojus greta:

el.addEventListener('blur', () => {           // (2) palieki lauką → tikrini
  touched.add(el.name);
  validateField(el.name);
});

el.addEventListener('input', () => {          // (3) rašai → tikrini TIK jei jau „touched"
  if (touched.has(el.name)) validateField(el.name);
});

Visa gudrybė — aibė touched. Laukas tampa „touched" tik jį palikus (arba pateikus formą). O input klausytojas tikrina tik touched laukus. Taigi:

Kol nepalikai lauko — tyla (nekrapštom, kol rašai pirmą kartą).
Palikai su klaida → laukas „touched" → nuo dabar kiekvienas klavišo paspaudimas tikrina, ir klaida dingsta vos ją ištaisius.

validateAll() (grąžinama funkcija) kviečiama per submit: patikrina viską ir pažymi visus laukus „touched", kad toliau būtų gyvas grįžtamasis ryšys.

Nustatymai, kurie veikia. settings.js sujungia tai su būsena: fillForm užpildo iš getSettings(), o per submit saveSettings(...) išsaugo į localStorage IR applyTheme(...) iškart pakeičia temą. Nustatymai — ne dekoracija; jie keičia programą ir išlieka. (settings-store.js laiko DEFAULT_SETTINGS; theme.js — applyTheme.)

Patikrink. Nustatymų formoje:

1. Palik „Display name" tuščią → klaida pasirodo (blur).
2. Pradedi rašyti → klaida dingsta iškart (touched → live).
3. Išsaugai → tema pasikeičia, o perkrovus reikšmės išlieka.

Spąstai (CSS — tikra klaida, kurią sugavom). Įvestis stilizavom taip:
input[type="text"] { ... }        /* ← tik type="text" */
input[type="text"] yra tikslaus atitikimo selektorius — jis nestilizuoja type="email", type="url", type="password". Pusė laukelių (el. paštas, URL, slaptažodis) atrodė kitaip. Sprendimas — stilizuoti pagal „viskas, išskyrus žymimuosius":
input:not([type="checkbox"]):not([type="radio"]) { ... }
Taip pagauni visus teksto tipus vienu kartu, o checkbox/radio (kurie turi savo išvaizdą) palieki ramybėje.

forms.js SUKURTI

Sukurk šį failą kataloge 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: {} };
  };
}