Форма с валидацией
Условие
Форма регистрации. Требования: · поля <input name="email">, <input name="password">, <input name="confirm">; · ошибка поля - <div class="error" data-for={name}>; · правила: почта содержит @, пароль от 8 символов, подтверждение совпадает с паролем; · ошибка поля показывается только после того, как поле теряло фокус, или после попытки отправки; · кнопка <button class="submit"> при ошибках показывает все ошибки и не вызывает onSubmit; · при валидных данных вызывает onSubmit({ email, password }).
Что проверяют тесты
на старте ошибок не видно
ошибка появляется после потери фокуса
ошибка исчезает после исправления
отправка показывает все ошибки
проверяет длину пароля
сверяет подтверждение
валидные данные уходят наружу
Как подойти
Разделение на «есть ли ошибка» (выводится из значений) и «показывать ли её» (touched или попытка отправки) - вся суть задачи. Хранить ошибки в состоянии значит синхронизировать их эффектами и ловить рассинхроны. Правила таблицей: добавление поля - строка, а не новая ветка. Подтверждение пароля показывает, зачем правилу доступ ко всем значениям. Что назвать вслух: асинхронная проверка занятости почты с debounce, схема на zod/yup, aria-invalid и aria-describedby, фокус на первое поле с ошибкой при отправке.
Подсказки: 3
- Ошибки не хранятся в состоянии - они вычисляются из значений на каждом рендере.
- Отдельно хранится, каких полей пользователь уже касался.
- Правила описываются таблицей, а не цепочкой if.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.