How to display validation error on TextField when Formik form is submitted without field touch

Question

I'm having Formik form with validationSchema and input fields which are implemented like this:

<TextField
  error={Boolean(touched.email && errors.email)}
  fullWidth
  helperText={touched.email && errors.email}
  label="Email address"
  name="email"
  onBlur={handleBlur}
  onChange={handleChange}
  required
  value={values.email}
  variant="outlined"
/>

If the user touches the field, it will be validated and he will see an error message. However, if he doesn't touch the field and tries to submit the form, validation will prevent it but the error message will not be displayed.

Is it possible to force each field to be touched onSubmit or something else that would cover this case?

Unknown Unknown · Accepted Answer · 2020-10-08T21:18:39

Actually, your condition to show error is not a good approach, I mean:

helperText={touched.email && errors.email}

When the submit button is clicked, you can access to onSubmit method and inside the onSubmit you can check the form error is existed or not, if it is existed so pass a local state and let the component update and with the local state show the helperText as error.

Using touched.email is not a good approach, specially when you have several inputs. it is not possible to focus all of them in the same time.

How to display validation error on TextField when Formik form is submitted without field touch

1 Answers