example.js

import React, {Component} from "react";
import {validateEmail, validateRequired} from "./validations";

class MyForm extends Component {
   render(
      return (<Input id="email"
                     placeholder="[email protected]"
                     label="Email (*Required)"
                     type="text"
                     validators={[validateEmail, validateRequired]}
                     value={this.state.email}
                     onChangeHandler={(e) => this.setState({email: e.target.value})}/>
   );
}

input_component.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

// NOTE: This is only setup for text inputs at this point.
export default class Input extends Component {
    constructor(props) {
        super(props)

        this.state = {
            valid: this.props.valid,
            errorMsg: this.props.errorMsg,
            value: this.props.value,
        }
        
        this.runValidations = _.debounce(this.runValidations, 1000);
    }

    componentWillReceiveProps(props) {
        this.setState({errorMsg: props.errorMsg, valid: props.valid, value: props.value});
    }

    componentDidUpdate(_prevProps, prevState) {
        this.runValidations(prevState.value);
    }

    shouldComponentUpdate(_nextProps, nextState) {
        return !_.isEqual(this.state, nextState);
    }

    runValidations(value) {
        if (_.isEmpty(this.props.validators)) return;

        for (let validator of this.props.validators) {
            const result = validator(value);
            if (!result.isValid) {
                this.setState({valid: false, errorMsg: result.message});
                return;
            }
        }

        this.setState({valid: true, errorMsg: null});
    }

    render() {
        return (
            <div className="form-group">
                <label htmlFor={this.props.id}>{this.props.label}</label>
                <input type={this.props.type}
                       className={`form-control ${this.props.class} ${this.state.valid ? '' : 'error'}`}
                       id={this.props.id}
                       placeholder={this.props.placeholder}
                       value={this.props.value}
                       onChange={(e) => this.props.onChangeHandler(e)}>
                </input>
                <p className='error-message'
                   style={{display: this.state.valid ? 'none' : 'block'}}>{this.state.errorMsg}</p>
            </div>);
    }
}

Input.propTypes = {
    id: PropTypes.string.isRequired,
    onChangeHandler: PropTypes.func.isRequired,
    label: PropTypes.string.isRequired,
    type: PropTypes.string,
    class: PropTypes.string,
    placeholder: PropTypes.string,
    value: PropTypes.string,
    validators: PropTypes.array,
    errorMsg: PropTypes.string,
}

Input.defaultProps = {
    type: 'text',
    label: 'My Input',
    class: '',
    placeholder: '',
    value: '',
    validators: [],
    valid: true,
    errorMsg: null,
}

validations.js

// all validations should take an **event** as an argument
// all validations should return an object with isValid && message strings

const validateEmail = (value) => {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const isValid = re.test(value);
    return {isValid: isValid, message: isValid ? null : 'Email is not a recognized format'};
}

const validateRequired = (value) => {
    const isValid = value ? true : false
    return {isValid: isValid, message: isValid ? null : 'A value is required'};
}

export {validateEmail, validateRequired};