反应表单验证显示错误答案

【问题标题】：React Form validation displaying error反应表单验证显示错误
【发布时间】：2018-01-02 03:09:51
【问题描述】：

我正在使用 React-Validation-Mixin 与 Joi 和 Joi-Validation-Strategy 对 React Step/Wizard 表单进行一些验证。

我有一个父 FormStart 元素，它通过 props 接收其 FormStep 子元素的状态。

验证正确地表示需要输入，但是当我在浏览器中输入正确的数字（PLZ/ZIP-Code 中的 5 个数字）时，它仍然会表示输入无效，即使 @987654325 @state 显示正确的 5 位数字，因此下一个按钮永远不会将我带到下一个表单步骤。

class FormStart extends Component {

    constructor(props) {
    super(props);

    this.state = {
    	step: 1,
    	zip: ""
	  }
    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;

React 控制台显示 zip 状态已正确更改，并且 Validation 对象也接收到相同的正确 5 位 zip 并且仍然保持正确的值 onBlur。

class FormStep7 extends Component {
    constructor(props) {
    super(props);
    this.validatorTypes = {
      PLZ: Joi.number().min(5).max(5).required().label('PLZ').options({
      	language: {
	      	number: {
	      		base: 'wird benötigt',
		        min: 'muss {{limit}} Nummern enthalten',
		        max: 'muss {{limit}} Nummern enthalten'
			    }
			  }
      })
    };
    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 (
    	  <form role="form" onSubmit={this.handleSubmit}>
		  		<div className='row'>
			  		<div className="col-md-10 col-md-offset-1">
			  			<div className='form-group'>
					  		<label htmlFor="zip">
					  		Einsatzort
					  		</label>
					  		<br />
					  		<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} />
					  		{this.renderHelpText(this.props.getValidationMessages('PLZ'))}
					  	</div>
			  		</div>
		  		</div>	  	

			    <div className='row'>
			      <div className="col-md-10 col-md-offset-1">
			        <button className="btn btn-green btn-block">Next</button>
			      </div>
			    </div>

			  </div>
			</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);

我做错了什么？

【问题讨论】：

标签： forms reactjs validation

【解决方案1】：

我发现问题出在Joi.number()。我更改了验证以匹配正则表达式字符串模式，然后它起作用了。

this.validatorTypes = {
  PLZ: Joi.string().regex(/^[0-9]{5}$/).label('PLZ').options({
    language: {
        string: {
            regex: {
                base: "mit 5 Nummern wird benötigt"
            }
        }
     }
  })
};

【讨论】：