0
我使用React-Validation-Mixin连同Joi和穰验证策略做一个阵营步骤/向导表的一些验证。阵营表单验证显示错误
我有一个家长FormStart元素通过道具接收其FormStep儿童的状态。
验证正确表明输入是必需的，但是当我在浏览器中输入正确的数字（PLZ/ZIP-Code中有5个数字）时，它仍会发出输入无效的信号，即使zip状态显示了正确的5位数字，所以下一个按钮从来没有带我到一个表单的一步。
class FormStart extends Component {
constructor(props) {
super(props);
this.state = {
\t step: 1,
\t zip: ""
\t }
this.goToNext = this.goToNext.bind(this);
}
goToNext() {
const { step } = this.state;
if (step !== 10) {
this.setState({ step: step + 1 });
if (step == 9) {
const values = {
zip: this.state.zip,
};
console.log(values);
// submit `values` to the server here.
}
}
}
handleChange(field) {
return (evt) => this.setState({ [field]: evt.target.value });
}
render(){
switch (this.state.step) {
case 1:
return <FormButton
onSubmit={this.goToNext}
/>;
//omitting the other 8 cases
case 9:
return <FormStep7
onSubmit={this.goToNext}
zip={this.state.zip}
onZipChange={this.handleChange('zip')}
/>;
case 10:
return <FormSuccess/>;
}
}
}
export default FormStart;的阵营控制台显示zip状态被正确地改变，并且验证对象也接收相同的正确的5位邮政编码和仍然保持着正确的值onBlur。
class FormStep7 extends Component {
constructor(props) {
super(props);
this.validatorTypes = {
PLZ: Joi.number().min(5).max(5).required().label('PLZ').options({
\t language: {
\t \t number: {
\t \t \t base: 'wird benötigt',
\t \t min: 'muss {{limit}} Nummern enthalten',
\t \t max: 'muss {{limit}} Nummern enthalten'
\t \t \t }
\t \t \t }
})
};
this.getValidatorData = this.getValidatorData.bind(this);
this.getClasses = this.getClasses.bind(this);
this.renderHelpText = this.renderHelpText.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
getValidatorData() {
return {
PLZ: this.props.zip
};
}
getClasses(field) {
return classnames({
'form-control': true,
'has-error': !this.props.isValid(field)
});
}
renderHelpText(message) {
return (
<span className='help-block'>{message}</span>
);
}
handleSubmit(evt) {
evt.preventDefault();
const onValidate = (error) => {
if (error) {
//form has errors; do not submit
} else {
this.props.onSubmit();
}
};
this.props.validate(onValidate);
}
render() {
return (
\t <form role="form" onSubmit={this.handleSubmit}>
\t \t \t \t <div className='row'>
\t \t \t \t \t <div className="col-md-10 col-md-offset-1">
\t \t \t \t \t \t <div className='form-group'>
\t \t \t \t \t \t \t <label htmlFor="zip">
\t \t \t \t \t \t \t Einsatzort
\t \t \t \t \t \t \t </label>
\t \t \t \t \t \t \t <br />
\t \t \t \t \t \t \t <input className={this.getClasses('PLZ')} id="PLZ" placeholder="Meine PLZ" type="text" onChange={this.props.onZipChange} onBlur={this.props.handleValidation('PLZ')} value={this.props.zip} />
\t \t \t \t \t \t \t {this.renderHelpText(this.props.getValidationMessages('PLZ'))}
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div> \t \t
\t \t \t <div className='row'>
\t \t \t <div className="col-md-10 col-md-offset-1">
\t \t \t <button className="btn btn-green btn-block">Next</button>
\t \t \t </div>
\t \t \t </div>
\t \t \t </div>
\t \t \t </form>
);
}
}
FormStep7.propTypes = {
errors: PropTypes.object,
validate: PropTypes.func,
isValid: PropTypes.func,
handleValidation: PropTypes.func,
getValidationMessages: PropTypes.func,
clearValidations: PropTypes.func
};
export default validation(strategy)(FormStep7);我在做什么错？