Search code examples
reactjsreact-bootstrapformikyup

validation field with formik

I am using a form with react-bootstrap, formik and yup.

https://stackblitz.com/edit/formik-reactbootstrap-validation-xdihwi

The problem is that when I fill in the first field, the second is automatically in error whereas I would like the fields to be in error only when they are not filled in and only field by field.

if I fill in the 1st field then the second is in error.

enter image description here

Do you have a solution to correct this problem?

Solution

  • you need to use handleBlur and touched to solve this issue

    https://stackblitz.com/edit/formik-reactbootstrap-validation-tdkizk?file=src/App.js

    <Form.Control
    value={formikProps.values.comment || ''}
    onChange={formikProps.handleChange}
    onBlur={formikProps.handleBlur}
    as="textarea"
    rows={3}
    name="comment"
    isInvalid={
      !!formikProps.touched.comment &&
      !!formikProps.errors.comment
    }
 />