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

Question

我正在使用这个plugin来验证我的表格。我想在.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

我不确定你要在那里验证什么，因为我不熟悉这个插件。但是，如果表单无效，则很容易显示错误。

你已经从values中的inputs中保存了state，所以你在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')
}