如何使用reactJS和typescript在Fabric UI中的提交表單上驗證多個文本字段？

Question

我在表單標簽中寫了下面的文本字段。 兩個文本字段都調用相同的函數。 我應該在同一時間多次調用{this._getErrorMessage}

我在下面的表單之外聲明函數。這個函數檢查空值。

    _getErrorMessage = (value: any) => {
    value.trim().length === 0 ? required : "" 
   }

    <Textfield
    id={AppIDConst`enter code here`ants.EMP_NAME}
    type={fieldPropertyConstants.TEXT}
    label={filedLabelConstants.EMP_NAME}
    onChange={this.handleChange.bind(this)}
    required={true}
    validateOnLoad={false}
    onGetErrorMessage= {this._getErrorMessage}
/>

<Textfield
    id={AppIDConstants.EMP_ADHAR_NO}
    type={fieldPropertyConstants.NUMBER}
    label={filedLabelConstants.ADHAR_NUMBER}
    required={true}
    onChange={this.handleChange.bind(this)}
    onGetErrorMessage= {this._getErrorMessage}
/>

Answer 1

如果要使用提交驗證而不是輸入驗證，則需要將驗證器函數添加到表單中。

onSubmit(form) {
  form.preventDefault();
  // retrieve form values and validate here...
}

render() {
  return (
    <form onSubmit={this.onSubmit}>
      // rest of form...
    </form>
  );
}

請記住在構造函數中綁定表單

constructor(props) {
  super(props)
  this.onSubmit = this.onSubmit.bind(this)
}