我正在使用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>
        );
    }
});

最佳答案

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

关于javascript - 如何避免立即验证使用formy-react构建的表单元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31156552/

10-12 12:39
查看更多