React: Mixins for input and form validation

[novabyte]

I understand that React focuses on the V in MVC but I think the primary focus of a web view is to support interaction by a user. It'd be nice if React had support for input and form validation.

I stumbled across this StackOverflow that demonstrates some mixins that make it easier to handle user input validation with React. Are there any plans to add more HTML form related tools like the LinkedStateMixin? Something official?

[artps]

It'd be nice if React had support for input and form validation

I'm just random guy, but I think no. It would be bad (for me of course). There are tons of nice schema validation and type coercion libs already. For example, you could write your own wrapper as mixin and publish to npm registry as separated module.

[chenglou]

I don't think input validation will ever be in core react. Simply speaking, this is something vanilla JS handles, and there's no need to impose a react-specific API for it.
LinkedStateMixin is a convenience mixin. It's actually not that encouraged because makes things less obvious.

[novabyte]

@chenglou Hmmm, that's a shame. Can I ask what libraries Facebook and Instagram use for form validation and input validation in their UIs?

[chenglou]

@novabyte like you saw in the SO mixin: just vanilla JS. And let it be this way, because vanilla JS is reusable JS =). Input validation isn't in a special category, at least not in React; there's no need to special case them. Facebook runs fine without the special handling!

[novabyte]

@chenglou It seems odd to me that you're using form validation mixins in your large web applications but don't see the value in extracting the code into something reusable and useful as a React addon or part of React core.

I'm not advocating that you pull in third party libraries into React to handle form validation but since the React documentation advocates building forms and most examples require some input field of some kind it seems odd that the most interactive aspect of a web UI is the least well catered for in the library.

I will close this issue but it is a shame that there's no plans for any helper mixins of any kind to help with form validation in a web UI.

[chenglou]

@novabyte Maybe I miscommunicated it, but I didn't mean that we necessarily extract those into a mixin. If you have a isInputNumeric() JS method, there's no reason not to use it in your onChange handler directly. If you've got, say, a Backbone app on the side, then you can also reuse the same, wrapper-less isInputNumeric because once again, it's vanilla JS. Your Backbone app wouldn't be able to reuse the code if it was a react-specific isInputNumericMixin.

[novabyte]

@chenglou I guess that's where I'm going wrong. I'm trying to use React without any other frameworks or libraries to build the web UI for a REST app.

I guess I should look into using Backbone or something else to fill in the gaps, build the model and validate it etc...

[petehunt]

React is much more of a better jQuery than it is a full-stack system.

Unfortunately we don't have the time to build, support and/or endorse a full-stack solution at this time. We're relying on the community for this; see this wiki page: https://github.com/facebook/react/wiki/Complementary-Tools

In the future we'll probably build some tooling to better enable community efforts. To solve your specific problem check this out: https://github.com/wingspan/wingspan-forms