Формы в React: управление вводом и простая валидация без сторонних библиотек

Аватар автора
Александр Ламков — Friendly Frontend
✏️ Добавим простую валидацию в форму добавления задач. Заблокируем кнопку Add, если поле пустое или содержит только пробелы. Научимся выводить ошибку под полем ввода и подсвечивать его красной рамкой. Улучшим UX: дадим пользователю понятную обратную связь и не позволим добавить пустую задачу. Покажу, как не нужно делать валидацию через useEffect — и как сделать её правильно через onInput. Расширим стили компонентов Button и Field для новых состояний. Сделаем поведение формы предсказуемым и удобным — без единой сторонней библиотеки. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:31 | Блокировка кнопки Add при пустом значении ▶ 06:10 | Валидация значения поля New task в форме AddTaskForm ▶ 11:29 | Стилизация error-состояния компонента Field ▶ 13:44 | Заключение 📚 Ссылки из видео: 🧑💻 Основной телеграм-канал: 💬 Коммьюнити-чат в телеграме (помощь новичкам): 🗂️ Бесплатные курсы на канале: 📌 Автор: #reactjs

0/0


0/0

0/0

0/0