Как валидировать формы на фронтенде?
- Нужна ли проверка на сервере, если есть на клиенте?
Проверка на клиенте — для удобства (быстрая подсказка), на сервере — обязательно (клиент можно обойти). Встроенные атрибуты: required, minlength, pattern, min/max, типы email и url; в JS — Constraint Validation API или библиотека схем (Zod, Yup). Ошибки показывать рядом с полем текстом, связывать через aria-describedby, проверять при уходе с поля или отправке, а не на каждый символ; фокус переносить на первое поле с ошибкой.
- Сообщение говорит, как исправить: «Пароль от 8 символов», а не «Неверно»
- Не стирать введённое при ошибке
- Одна схема проверки на клиенте и сервере — меньше расхождений
Подробно
Ошибка сервера (почта занята) тоже должна показываться у поля, а не общим «Что-то пошло не так».
Что хотят услышать
- Клиент для удобства, сервер обязательно.
- Встроенные атрибуты и схемы.
- Понятные сообщения рядом с полем.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Достаточно проверки на клиенте — сервер может доверять данным, раз форма их уже проверила
- ✗Показывать ошибку на каждый введённый символ — лучший UX
- ✓Клиентская проверка — для удобства, серверная обязательна; ошибка текстом у поля
- ✗При ошибке очищать форму, чтобы пользователь ввёл всё заново
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.