React Patterns

control-validation-react-form.es6

const validate = (data, callback) => {
  if (!data.email) {
    Promise.reject({ email: 'Useful validation message here.'})
  }
  
  callback(data);
}

class MyForm extends Component {
	constructor() {
		super();
		this.withValidation = this.withValidation.bind(this);
		this.withoutValidation = this.withoutValidation.bind(this);
  }
  
  withValidation(data, dispatch) {
		return validate(data, validated => dispatch(someBehaviour(validated.email)));
	}

	withoutValidation(data, dispatch) {
		return dispatch(someOtherBehaviour(data.email));
	}
	
	render() {
		const { handleSubmit } = this.props;

    return (
      <div>
        <Button onClick={handleSubmit(this.withValidation)} />
        <Button onClick={handleSubmit(this.withoutValidation)} />
      </div>
	  );
	}
}

export default reduxForm({
	form: 'MyForm',
	fields: ['email']
})(MyForm);