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

Question

[Ken Jee]

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

P.S.
Наткнулся на npm пакет для валидации https://www.npmjs.com/package/react-validate-form может есть еще какие компоненты для ознакомления?

Answer 1

[Максим]

Для валидации простой формы, не нужно использовать библиотеки.

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

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

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

Так же здесь больше подробностей есть в разделе "Блок кнопки, если поля не валидны" (поиском поищите по статье).

Comments

[angelzzz]

Такой вопрос: делаю компонент инпута, а в нем в зависимости от name делаю валидацию. Можно ли так делать? Или как посоветовали в одной группе - валидировать все в форме (в том числе чтобы без проблем сранивать, например, поля Пароль и Повторите пароль)?

Answer 2

[Frozen Coder]

Посмотрите на final-form и react-final-form. Вот сразу ссылки на примеры из доки:

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

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