Урок 20. Частые ошибки в формах

📁 Раздел: shadcn/ui ⏱️ Время изучения: ~55 мин 🎯 Сложность: Продвинутая

⚡ Кратко

Плейсхолдер вместо подписи, ошибка только цветом, отсутствие autocomplete, кнопка без блокировки и валидация «на каждую букву».

Ошибка 1. Плейсхолдер вместо подписи

Как ломается: начал вводить — подсказка исчезла, и уже не понять, что это за поле. Плюс плейсхолдер обычно имеет низкий контраст.

❌ Только плейсхолдер

<Input placeholder="Электронная почта" />

✅ Подпись плюс плейсхолдер-пример

<Field>
  <FieldLabel htmlFor="email">Электронная почта</FieldLabel>
  <Input id="email" placeholder="name@example.com" />
</Field>

Ошибка 2. Ошибка передана только цветом

Как ломается: человек видит красную рамку, но не понимает, что исправлять; скринридер не сообщает ничего.

Как правильно: aria-invalid плюс текст с role="alert", связанный через aria-describedby. Текст должен говорить, что сделать: «Минимум 8 символов», а не «Неверное значение».

Ошибка 3. Нет autocomplete

Как ломается: менеджер паролей не подставляет данные, пользователь вводит вручную и ошибается.

<Input id="email" type="email" autoComplete="email" />
<Input id="password" type="password" autoComplete="current-password" />
<Input id="new-password" type="password" autoComplete="new-password" />

Это одна из самых дешёвых улучшений формы: три атрибута — и заполнение ускоряется вдвое.

Ошибка 4. Кнопка не блокируется

Как ломается: двойной клик — два заказа, две регистрации, два письма.

<Button type="submit" disabled={isSubmitting}>
  {isSubmitting ? "Отправляем…" : "Отправить"}
</Button>

Ошибка 5. Валидация на каждое нажатие клавиши

Как ломается: пользователь набирает первую букву почты — и сразу получает «некорректный адрес». Ощущение, что форма ругается ещё до того, как вы закончили.

Как правильно: проверять при уходе из поля (onBlur) или при отправке, а уже после первой ошибки — обновлять на лету, чтобы человек видел, что исправление помогло. В react-hook-form это режим mode: "onTouched".

Ошибка 6. Обязательные поля не помечены

Если обязательных полей меньше половины — помечайте их. Если больше — помечайте необязательные словом «необязательно». Звёздочка без пояснения понятна не всем, поэтому рядом с формой нужна расшифровка либо явная подпись.

Ошибка 7. Потерянный фокус после отправки

Форма отправилась, появилось сообщение об успехе — а фокус остался на исчезнувшей кнопке. Пользователь клавиатуры «проваливается» в начало страницы. Переводите фокус на сообщение о результате.