React: input validation

Question

I recently started working with React and I faced the problem with inputs validation. For example, it simply implemented in another framework as Angular.js via directives.

After some researching I found

1. newforms library, looks like the best solution from the box on current moment. But it's pretty heavy and not sure that it's currently supported (last update 7 months ago).
2. Another approach is sending events from parent form to its children inputs, and calling validation method on each.

But I could not find the best practices everyone tries to invent something own and as a result you need to write something own.

What is best solution for form validation? Does React architecture/frameworks (Flux/Redux) provide any solution?

Thanks,

Answer 1

I worked with some forms in React recently, and I had a very similar experience. I think what this boils down to is that React is very new, and form validation is a hard problem to solve in general. This leads to kind of a Wild West of form validation, where there is no set standards, and many new libraries trying to solve the problem (each doing it their own way and making lots of assumptions).

I ended up using formsy-react (https://github.com/christianalfoni/formsy-react) which was fairly straight-forward, but made one big assumption - that we want to validate the input onChange. I wanted my inputs to render an error onBlur which lead to me writing some helper functions to create that behavior.

I haven't yet dug into Redux too much, but there do seem to be some good options in that arena (https://www.npmjs.com/package/redux-form), that may suit your needs.

Let me know if you'd like to see an example of my Formsy form validators/helper methods.

Hope this helped, or at least provided some solidarity that form validation in the React world is, as of now, unclear and lacks a standard.