Как сделать так, что бы при сабмите формы возле каждого неправильно заполненного инпута было написано сообщение ошибки?

Question

[KononovD]

Здравствуйте, вот пример формы:


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



Расскажите как это сделать? Спасибо.

Comments

[KononovD]

У меня есть идея сделать инпут dumb компонентом который будет просто рисовать пропсы, а на уровне формы, при сабмите, решать правильно ли заполнены поля и если нет - спускать в них isError={true} и errorText='текст ошибки'

Answer 1

[Надим]

Вам поможет атрибут pattern, в нем можно прописать регулярку для валидации поля, а также указать сообщение, которое должно появляться, если поле заполнено некорректно (там несколько способов).

Готовый список регулярок см. здесь.

Answer 2

[Alexander Dozmorov]

Можно посмотреть в сторону специализированных библиотек.
Например https://github.com/jquense/yup
Отлично интегрируется с такими библиотеками форм как Formik и react-final-form

Answer 3

[camelCaseVlad]

Для создания форм в проектах с реакт, используйте Формик.

https://jaredpalmer.com/formik/