Universal validation feedback example

Basic validator component

import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';

class ValidatorMessage extends ValidatorComponent {
     renderValidatorComponent() {
        const {
            error,
            errorMessages,
            validators,
            requiredError,
            helperText,
            validatorListener,
            withRequiredValidator,
            containerProps,
            children,
            ...rest
        } = this.props;
        const { isValid } = this.state;
        return (
            <div {...rest}>
                {children}
                { !isValid && <div>{this.getErrorMessage()}</div> }
            </div>
        );
    }
}

export default ValidatorMessage;

Usage examples:

1.

<ValidatorForm onSubmit={this.submit}>
    <input name="email" value={value} onChange={this.handleChange} />
    <ValidatorMessage
        name="email"
        value={value}
        validators={['required']}
        errorMessages={['email is required']}
    />
</ValidatorForm>

2.

<ValidatorForm onSubmit={this.submit}>
    <ValidatorMessage
        name="email"
        value={value}
        validators={['required']}
        errorMessages={['email is required']}
    >
        <input name="email" value={value} onChange={this.handleChange} />
    </ValidatorMessage>
</ValidatorForm>