Модуль 10 · Урок 39
Accessible forms, FormData і Constraint Validation
Починайте з native form, labels, names, constraints і submit semantics. JavaScript може покращити feedback, але client validation не є security boundary й не замінює server validation.
Form як contract
form.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(form);
const title = String(data.get('title') ?? '').trim();
});name визначає успішний control у FormData. Enter і submit button сходяться в submit event. Не читайте тільки click, інакше keyboard/programmatic submission матимуть інший path.
Constraint Validation API
validity деталізує valueMissing/typeMismatch/range/pattern states; checkValidity() перевіряє, reportValidity() показує native feedback. Перед новою custom перевіркою очистіть stale message через setCustomValidity(''). Error має бути текстовим, пов’язаним із control, з correction hint; після submit фокусуйте першу invalid field.
Server boundary
DevTools або прямий request обходять client rules. Сервер повторює normalization, authorization і validation.
Практика
Заповніть form constraint map і notification plan. Перевірте empty, too short, corrected value, Enter-submit і repeated submit без network request.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.