В первой части (Валидация форм React. Часть 1) я описал, как можно работать с react-validate-form, теперь буду улучшать код. Вынесем в отдельный блок поле инпут, подсказки и ошибки. И подключим redux.

import React, {Component} from 'react';
import {connect as vBooConnect} from 'react-validation-boo';
import {connect as reduxConnect} from 'react-redux';
import {InputBlock, InputCheckboxBlock, InputRadioGroupBlock, TextareaBlock, SelectBlock} from '../form/default';

class MyForm extends Component {
    constructor() {
        super();

        this.genderOptions = [
            {value: '', label: 'Ваш пол?'},
            {value: 1, label: 'Мужской'},
            {value: 2, label: 'Женский'}
        ];

        this.familyRadioList = [
            {value: 1, label: 'холост'},
            {value: 2, label: 'сожительство'},
            {value: 3, label: 'брак'}
        ];
    }
    componentWillMount() {
        this.props.vBoo.subscribe('change:input', this.props.onChangeVBooInput);
        this.props.vBoo.subscribe('valid:form', this.props.onChangeVBooValid);
    }
    render() {
        let s = this.props.myStore.inputs;
        return <Form connect={this.props.vBoo.connect}>
            <InputBlock name="name" value={s.name} />
            <InputBlock name="email" value={s.email} />
            <SelectBlock name="gender" options={this.genderOptions} value={s.gender} />
            <InputRadioGroupBlock name="familyStatus" items={this.familyRadioList} value={s.familyStatus} />
            <TextareaBlock name="comment" value={s.comment} />
            <InputCheckboxBlock name="addition" value="yes" checked={s.addition==='yes'} />

            <button onClick={this.sendForm}>
                {this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
            </button>
        </Form>
    }
}

export default reduxConnect(
    store => ({
        myStore: { // для наглядности
            isValid: false,
            inputs: {
                email: 'test@mail.ru',
                gender: 0,
                familyStatus: 1
            }
        }
    }),
    dispatch => ({
        onChangeVBooInput: (input) => {...},
	onChangeVBooValid: (isValid) => {...}
    })
)(vBooConnect({
    rules: () => ([...]),
    labels: () => ({...}),
})(MyForm));

Для начала надо установить компонент react-validation-boo, предполагаю что с react вы знакомы и как настроить знаете.

npm install react-validation-boo

Чтобы много не болтать, сразу приведу небольшой пример кода.

import React, {Component} from 'react';
import {connect, Form, Input, logger} from 'react-validation-boo';

class MyForm extends Component {
    sendForm = (event) => {
        event.preventDefault();

        if(this.props.vBoo.isValid()) {
            console.log('Получаем введённые значения и отправляем их на сервер', this.props.vBoo.getValues());
        } else {
            console.log('Выведем в консоль ошибки', this.props.vBoo.getErrors());
        }
    };
    getError = (name) => {
        return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : '';
    };
    render() {
        return <Form connect={this.props.vBoo.connect}>
            <div>
                <Input type="text" name="name" />
                {this.getError('name')}
            </div>
            
            <button onClick={this.sendForm}>
                {this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
            </button>
        </Form>
    }
}

export default connect({
    rules: () => (
        [
            ['name', 'required'],
        ]
    ),
    middleware: logger
})(MyForm);