How to validate form fields in ReactJS?

Question

React

Tell me how to organize the validation of form fields in ReactJS. And it is even better to show an adequate example. An interesting option is validating a field with highlighting it in case of an error and displaying a message under it.
PS
I came across an npm package for validation https://www.npmjs.com/package/react-validate-form , are there any other components to review?

Answer 1

To validate a simple form, you don't need to use libraries.
The state has a set of fields, for example, related to email: emailError - error text or empty, emailIsValid - true / false
Therefore, if the error came from the server - put it in emailError, if input starts - erase ... Based on these fields - in template to draw a message / highlight the border at the input.
No need to drag on simple library forms. Because then complex and stupid questions begin in the style: how can I put something into the callback formic for an update in the store .. , it’s better to understand the theory and do it once. And when the plus from the libraries for forms is clear, then just take them.
There are also more details in the "Button block, if the fields are not valid " (search for the article).

Answer 2

Look at final-form and react-final-form. Here are links to examples from the docks:
https://github.com/final-form/react-final-form#examples
Yes, there is not only validation, but also work with forms in general. IMHO, fit, simple, beautiful, all inclusive)