How do you organize validations in flux/react.js?

Question

JavaScript

In my project I am using react.js and something similar to flux. There is one huge object that is responsible for the state of almost everything, the dispatcher listens to events in the components and updates this object, as a result, the react renders the changes to the page. All clear. But when it came to complex dynamically generated forms and complex validations, the question arose how to organize it all? It's clear that the validation itself should be somewhere near the dispatcher, but how to correctly convey these errors to the components?

Answer 1

Ideally, you should have a type component <InputValidator />that wraps the input field and has validation logic in it. You can pass validation rules (pattern, length, etc.) to this component, and onChangedispatch and update the global state on it.
The validity status can be passed directly to onChange, as the second parameter, after the event, or added to the event object.
A component with field validation shouldn't be bound internally to your code, it should be a black box.

Answer 2

and I liked this library https://github.com/christianalfoni/formsy-react

Answer 3

For my projects I use my web-form-validator library