/* Codeboosh */

How To Do Conditional Validation With Formik and Yup

Formik and Yup provides a nice easy way to do conditional validation for your React projects.

Using the when method you can conditionally add validation to a field based on another.

For example, below we want an input required only if a checkbox is checked.

Yup.object().shape({
    aCheckbox: Yup.boolean('Select this checkbox please'),
    anotherField: Yup.string().when("aCheckbox", {
        is: (aCheckbox) => aCheckbox === true,
        then: Yup.string().required('I am required now the checkbox is checked')
    })
});

Source: Yup documentation

You can even have conditional validation based on an array of fields. In this example, the input is only required if two checkboxes are checked.

Yup.object().shape({
    aCheckbox: Yup.boolean('Select this checkbox a please'),
    bCheckbox: Yup.boolean('Select this checkbox b please'),
    anotherField: Yup.string().when(["aCheckbox", "bCheckbox"], {
        is: (aCheckbox, bCheckbox) => aCheckbox === true && bCheckbox === true,
        then: Yup.string().required('I am required now that both checkboxes are checked')
    })
});

👍 Thanks for reading. Have a great rest of your day.