Machez
@Machez
Бу!

Как валидировать поля формы в ReactJS?

Подскажите, как организовать валидацию полей формы в ReactJS. А еще лучше показать адекватный пример. Интересен вариант валидирования поля с подсветкой его при ошибке и выводе сообщения под ним.

P.S.
Наткнулся на npm пакет для валидации https://www.npmjs.com/package/react-validate-form может есть еще какие компоненты для ознакомления?
  • Вопрос задан
  • 1592 просмотра
Решения вопроса 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Для валидации простой формы, не нужно использовать библиотеки.

В стейте есть набор полей, например относящихся к email: emailError - текст ошибки или пусто, emailIsValid - true/false

Следовательно, если ошибка пришла с сервера - ее класть в emailError, если начинается ввод - стирать... На основе этих полей - в шаблоне рисовать сообщение / подсвечивать бордер у инпута.

Не нужно тащить на простые формы библиотеки. Потому что потом начинаются сложные и бестолковые вопросы в стиле: как мне на апдейт в сторе, в колбэк формика что-нибудь засунуть.., лучше понять теорию и один раз сделать. А уже когда будет понятен плюс от библиотек для форм - тогда только брать их.

Так же здесь больше подробностей есть в разделе "Блок кнопки, если поля не валидны" (поиском поищите по статье).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@frozen_coder
Java-developer
Посмотрите на final-form и react-final-form. Вот сразу ссылки на примеры из доки:

https://github.com/final-form/react-final-form#examples

Да, там не только валидация, но и вообще работа с формами. Имхо, годно, просто, красиво, всё включено)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы