javascript - Checkbox schema validation with Yup

0
votes

I'm using Yup to validate my schema which has an array of

  • Title
  • Multiple checkboxes, one of which must be true.

I've been using Formik, so here's the initial values

const initialValues = {
    exercises: [
        {
            title: "",
            exerciseType: {
                reps: false,
                duration: false,
                extraWeight: false,
            },
        },
    ],
};

Following on, here's my validation schema -

const exerciseSchema = yup.object().shape({
        exercises: yup.array().of(
            yup.object().shape({
                title: yup.string().required().min(2).label("Exercise Name"),
                exerciseType: yup
                    .object({
                        reps: yup.boolean(),
                        duration: yup.boolean(),
                    })
                    .test("validationTest", null, (exerciseType) => {
                        if (exerciseType.reps || exerciseType.duration) {
                            return true;
                        }
                        return new yup.ValidationError(
                            "Please select what you'd like to track for this exercise.",
                            exerciseType,
                            "exerciseType"
                        );
                    }),
            })
        ),
    });

Whilst this is throwing an error, it throws an error for all the checkboxes in the array. Ideally it should only check for each exerciseType object before throwing an error.

Any tips on how I can fix this would be massively appreciated as I've been stuck on this for hours now!

javascriptreact-nativeformikyup