Как показать сообщение об ошибке, когда поле обязательно для заполнения и его значение пусто

Question

Я использую этот плагин для проверки моей формы. Я хочу показать сообщение об ошибке на button, когда происходит .click. В моей форме все поля 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')
}