validate on blur

Example input

var React = require('react');
var Formsy = require('formsy-react');

var MyTextInput = React.createClass({
    mixins: [Formsy.Mixin],
    changeValue: function (event) {
        if(this.getErrorMessage() != null){
            this.setValue(event.currentTarget.value);
        }
        else{
            if (this.isValidValue(event.target.value)) {
                this.setValue(event.target.value);
            }
            else{
                if (this.isValid()) {
                  this.setValue(event.target.value);
                }
                this.setState({
                    _value: event.currentTarget.value,
                    _isPristine: false
                });
            }
        }
    },
    blurValue: function (event) {
        this.setValue(event.currentTarget.value);
    },
    keyDown: function (event){
        if(event.keyCode=='13'){
            this.setValue(event.currentTarget.value);
        }
    },
    render: function () {
        var className = this.showRequired() ? 'form-group' : this.showError() ? 'form-group has-error' : "form-group";
        var errorMessage = this.getErrorMessage();
        return (
            <div className={className}>
                <label >{this.props.label}</label>
                <div>
                    <input type="text" onBlur={this.blurValue} onKeyDown={this.keyDown} onChange={this.changeValue}
                           value={this.getValue() || ''} placeholder={this.props.placeholder} />
                    <span >{errorMessage}</span>
                </div>
            </div>);
    }
});
module.exports = MyTextInput ;

Form example

var MyTextInput = require('./MyTextInput');


var MyFrom = React.createClass({
    getInitialState: function () {
        return {canSubmit: false)}
    },
    handleClick: function (form, formReset, invalidateForm) {

    },
    enableButton: function () {
        this.setState({
            canSubmit: true
        });
    },
    disableButton: function () {
        this.setState({
            canSubmit: false
        });
    },
    render: function () {
           return ( <Formsy.Form onSubmit={this.handleClick} onValid={this.enableButton}  onInvalid={this.disableButton} >
                <div >
                    <MyTextInput name="userName" placeholder="username"
                           validationError={{minLength: "Error not between 5 and 15"}}
                           label="Username"
                           required
                           validations={{minLength:5, maxLength: 15}}/>
                    <MyTextInput name="email" placeholder="Email"
                           label="Email"
                           required 
                          validations="isEmail"
                           validationError="Not an Email valid" />
                </div>
                <div className="panel-footer text-right">
                    <input type="submit" 
                           disabled={!this.state.canSubmit}
                           value="Send" />
                </div>
           </Formsy.Form>);
        )
    }
});

module.exports = MyFrom;