Bulletproof Validation forms in React

Something no one talks about

Bulletproof Validation
forms in React

Something no one talks about

Anton @isnifer Kuznetsov
11/26/2015

About me

Anton Kuznetsov

Hype

What do I want?

What should I do?

  1. Find equivalent solutions to those in the current codebase
  2. Write my own, in case there are none
  3. Prepare presentation
  4. Create an example of this solution
  5. Lure collegues to the Light Side of the Force
Forms

What are the requirements?

What are the expectations?

The simplest API 
			{
				isValid: false,
				isInvalid: true,
				isValidating: false,
				invalidFields: ['username']
			}

Existing Solutions

Benefits: Drawbacks:

Valya

Create Validator

			import React, { Component } from 'react';
			import Valya from 'valya';
			 
			@Valya
			class Validator extends Component {
				// Rendering Error
				// Rendering Validator
			}

Rendering Error

			renderError() {
				if (!this.props.enabled || this.props.isValid) {
					return null;
				}
				return (
					<span className="validator__error" key="error">
						{this.props.validationErrorMessage}
					</span>
				);
			}

Rendering Validator

			render () {
		        return (
		            <span className="validator">
		                <span className="validator__target">
		                    {this.props.children}
		                </span>
		                {this.renderError()}
		            </span>
		        );
		    }

Usage: Props

			<Validator
	        	value={this.state.value}
	        	validators={ // ... }
	        	onEnd={(isValid, message) => {
	        		console.log('validation end:', isValid, message);
	        	}}>
	        	<input type="text" value={this.state.value} 
	        		onChange={e => this.setState({value: e.target.value})} />
	        </Validator>

Usage: Validators

	        [{
	        	validator(value, params) {
	        		if (value) return Promise.resolve();
	         
	        		return Promise.reject(params.message);
	        	},
	        	params: {
	        		message: 'Field is required'
	        	}
	        }]

What are the requirements?

  • Each field has an independent validator
  • Forms have 3 flags: isValid, isInvalid, isValidating
  • Forms know which fields are invalid
  • Forms have an API to manage validation (automatically or manually)

Foma

Foma Usage

			import React, { Component } from 'react';
			import Valya from 'valya';
			import Foma from 'foma';
			 
			@Foma
			class FormDemo extends Component {
				// Write your own form as you want
				// Use Valya
			}

Foma API (WIP)

FormDemo has some "special" props:
  • isValid {Boolean}
  • isInvalid {Boolean}
  • isValidating {Boolean}
  • invalidFields {Array}

Demo

What are the requirements?

  • Each field has an independent validator
  • Forms have 3 flags: isValid, isInvalid, isValidating
  • Forms know which fields are invalid
  • Forms have an API to manage validation (automatically or manually)

Thank you! Questions?

Find @iSnifer on social:

More info: j.mp/bv-11-2015

Demo examples