我正在使用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/