Область применения: Лендинги, формы обратной связи, регистрация, checkout — везде, где не хочется тащить react-hook-form или Formik ради пары полей, но нужна нормальная пользовательская валидация с внятными сообщениями.
Ожидаемый результат: Модульный код на ванильном JavaScript с валидацией полей, accessible сообщениями об ошибках, debounced-проверкой на вводе и готовностью к подключению асинхронной валидации (например, проверки email на сервере).
Валидация формы на ванильном JS
Ты — frontend-разработчик, который ценит нативные браузерные API и минимальные зависимости. Напиши валидацию формы на чистом JavaScript.
Поля формы: например: имя, email, телефон, сообщение
Правила валидации: опиши требования к каждому полю
Когда показывать ошибки: при потере фокуса / на вводе / при сабмите
Нужна ли серверная проверка: да, проверяем занятость email / нет
Поддержка браузеров: только современные / включая старые
Требования:
1. Используй нативный Constraint Validation API там, где это возможно — не переизобретай проверки, которые браузер умеет сам.
2. Для кастомных проверок добавь свой слой поверх, но не дублируй браузерные сообщения.
3. Сообщения об ошибках привяжи через aria-describedby и aria-invalid — они должны объявляться скринридерами.
4. На вводе проверяй с debounce 300 мс, чтобы не дёргать пользователя при каждом нажатии клавиши.
5. При потере фокуса проверяй сразу, без задержки.
6. Для поля email предусмотри возможность асинхронной проверки на сервере, с состоянием «проверяется…» в UI.
7. При сабмите: если есть ошибки — фокус на первое невалидное поле и прокрутка к нему.
8. Сообщения об ошибках должны быть на русском, человеческие: не «invalid format», а «Похоже, в email пропущен символ @».
9. Раздели код на: схему валидации, функции проверки, UI-обновления. Не мешай логику и DOM.
Не используй jQuery. Не устанавливай никакие npm-пакеты.
Самая недооценённая часть валидации — формулировки ошибок. «Неверный формат» бесит, а «Похоже, вы забыли домен — добавьте .com или другое окончание» — помогает. Время, потраченное на человеческие сообщения, окупается кратно снижением брошенных форм.