在必填字段且值为空时如何显示错误消息？

Question

我正在使用此插件来验证我的表单。 当发生.click时，我想在button上显示错误消息。 在我的表单中，所有字段都是required字段，因此我需要验证我的表单。

我尝试使用下面的代码，但不起作用

<FormControl className={classes.formControl}>
            <TextValidator
              required
              InputLabelProps={{
                shrink: true
              }}
              id="name"
              label="search value"
              name="searchValue"
              value={searchValue}
              onChange={event => handleInput(event, "searchValue")}
              validators={["required"]}
              errorMessages={["this field is required"]}
              margin="normal"
            />
          </FormControl>

这是我的代码https://codesandbox.io/s/l40l795vx7

<SearchForm
          handleInput={this.handleInputFieldChange}
          submitClick={this.submitButtonClickHandle}
          form={form}
        />

Answer 1

我不确定您要在其中验证的内容，因为我对插件不熟悉。 但是，如果表单无效，则很容易显示错误。

您已经在state保存了来自inputs的values ，因此在submitButtonClickHandle函数中要做的所有事情都类似于：

if(this.state.form.searchValue !== '**some conditions**' && 
this.state.form.circle !== '**some condition**'){
 //
 alert('You did not meet the search criteria')

} else {
// DO WHAT YOU WANT IF ON THE SUBMIT
alert('everything is fine, here is your result')
}