Question

我正在使用formsy-react来验证我的React表单，但我不希望验证在用户输入之前启动。只要该字段被标记为“必需”，它似乎正在工作，但当省略时，错误消息立即显示。

我做错了吗？

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>
        );
    }
});

enter image description here

Answer 1

changeValue()将设置该值，而后者将验证该值以及表单的其余部分。你可以简单地尝试检查这样的空字符串，以防止在开始时进行验证：

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

如果它没有达到预期的效果，您可以添加一个“阻止”验证的状态，直到第一次更改。

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

我能够通过在表单级别使用validationErrors而不是输入级别来克服此问题。

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>
    );
}

传递给组件的prop name =“email”必须与validationErrors相同：{email：} 这样输入映射到错误消息。

它使您可以更好地控制并管理每次更改时的错误。

如何避免立即验证使用formy-react构建的表单元素？

2 个答案: