Formik + Yup date required validation

Question

I am trying to use Formik with Yup & material-ui/pickers.

Whenever I try to make a date field required this never shows an error message.

upon console logging out the Formik Errors I see that it loops through logging the error then resetting it to a blank "".

See sandbox : https://codesandbox.io/s/fervent-shape-pq0z2?file=/src/App.js

Anyone have any idea how I can make a date picker required and have an error show if not valid?

Thanks

tobzilla90 tobzilla90 · Accepted Answer · 2020-10-20T12:56:32

Delete onError in the KeyboardDatePicker and it will work

 <KeyboardDatePicker
    clearable
    disablePast
    name={field.name}
    value={field.value}
    format="dd/MM/yyyy"
    helperText={currentError}
    error={Boolean(currentError)}
    onChange={(date) => form.setFieldValue(field.name, date, true)}
    {...other}
  />

Formik + Yup date required validation

1 Answers