React: input validation

Question

I recently started working with React, and I ran into an input validation problem. For example, it is simply implemented in another structure like Angular.js through directives.

After some research, I discovered

• newforms library, looks like the best solution from the window at the moment. But it is quite heavy and not sure if it is currently supported (last updated 7 months ago).
• Another approach is to send events from the parent form to their child inputs and call the validation method on each of them.

But I could not find the best practices that everyone is trying to invent something of their own, and as a result you need to write something of their own.

What is the best form validation solution? Does React architecture / framework (Flux / Redux) implement any solution?

Thanks,

Answer 1

I recently worked with some forms in React, and I had a very similar experience. I think it comes down to the fact that React is very new, and form validation is a difficult problem to solve as a whole. This leads to the Wild West type for form validation, where there are no established standards, and many new libraries are trying to solve the problem (each does it in its own way and makes many assumptions).

In the end, I used formsy-react ( https://github.com/christianalfoni/formsy-react ), which was pretty straight forward, but made one big assumption - we want to check onChange input. I wanted my inputs to display an onBlur error that caused me to write some helper functions to create this behavior.

I haven't dug up Redux yet, but there seem to be good options on this arena ( https://www.npmjs.com/package/redux-form ) that can suit your needs.

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

I hope that this helped, or at least provided some solidarity, which forms the validation in the world of React, is currently unclear and has no standard.

Answer 2

I use a lightweight weighing solution and it is pretty customizable.

The input is confirmed on onChange , but can be changed to any. We can create a similar component for textarea, checkbox, radio

 var Input = React.createClass({ getInitialState: function(){ // we don't want to validate the input until the user starts typing return { validationStarted: false }; }, prepareToValidate: function(){}, _debounce: function(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }, componentWillMount: function(){ var startValidation = function(){ this.setState({ validationStarted: true }) }.bind(this); // if non-blank value: validate now if (this.props.value) { startValidation(); } // wait until they start typing, and then stop else { this.prepareToValidate = _self._debounce(startValidation, 1000); } }, handleChange: function(e){ if (!this.state.validationStarted) { this.prepareToValidate(); } this.props.onChange && this.props.onChange(e); }, render: function(){ var className = ""; if (this.state.validationStarted) { className = (this.props.valid ? 'Valid' : 'Invalid'); } return ( <input {...this.props} className={className} onChange={this.handleChange} /> ); } }); 

Our component where we will display the form. We can add as many validation rules as you want.

 var App = React.createClass({ getInitialState: function(){ return {email: ""}; }, handleChange: function(e){ this.setState({ email: e.target.value }) }, validate: function(state){ return { email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([az]{2,6}(?:\.[az]{2})?)$/.test(state.email) } }, render: function(){ var valid = this.validate(this.state); return ( <div> <Input valid={valid.email} value={this.state.email} onChange={this.handleChange} placeholder=" [e-mail] "/> </div> ); } }); 

It is quite simple and customizable, and works very well for small projects. But if we are a large project and have many different forms, writing every time an application component with handlers is not the best choice