How to avoid immediate validation of form elements built with formsy-react?

Question

I'm using formsy-react to validate my React forms, but I don't want the validation to kick in before the user types. It seems to be working as long as the field is marked as "required", but when omitted, the error message shows immediately.

Am I doing it wrong?

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

var MyOwnInput = React.createClass({
    mixins: [Formsy.Mixin],

    changeValue: function (event) {
        this.setValue(event.currentTarget.value);
    },
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} placeholder={this.props.name}/>
                <span>{this.getErrorMessage()}</span>
            </div>
        );
    }
});

module.exports = React.createClass({
    render: function () {
        return (
            <Formsy.Form>
                <MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
                <MyOwnInput name="email2" validations="isEmail" validationError="This is not a valid email (no required attribute)"/>

                <button type="submit">Submit</button>
            </Formsy.Form>
        );
    }
});

Answer 1

changeValue() will set the value, which in turn will validate it and the rest of the form. You could simply try to check for an empty string like this to prevent the validation at the beginning:

changeValue(event) {
    const newValue = event.currentTarget.value;
    if (newValue) this.setValue(newValue);
}

If it doesn't have the desired effect you could add a state that 'blocks' the validation until the first change.

getInitialState() {
    return {
        enableValidation: false
    }
}

changeValue(event) {
    const newValue = event;
    if (newValue && !this.state.enableValidation) this.setState({ enableValidation: true });
    if (newValue || this.state.enanbleValidation) this.setValue(newValue);
}

Answer 2

I was able to overcome this issue, by using validationErrors in Form Level, instead of input level.

constructor(props) {
    super(props);
    this.state = {validationErrors: {}};
}


isNotValid(email) {
    // my validation code

}

validateForm(values) {
    if (isNotValid(values.email)) {
        this.setState({validationErrors: {email: 'my error messsage'}});
    } else {
        this.setState({validationErrors: {}});
    }
}


render() {
    return (
        <Formsy.Form
            onChange={this.validateForm}
            validationErrors={this.state.validationErrors}
        >
            <FormsyText
                floatingLabelText="some text"
                name="email"
                ref="email"
                value={this.state.email}
                onChange={(e) => this.handleChange('email', e)}
            />
        </Formsy.Form>
    );
}

The prop name="email" you pass to the component must be same as validationErrors: {email:} This way the input mapped to the error message.

It allows you to be in more control and manage the errors on every change.