Validation Error

[Master-Daniel]

The validation schema below gave me the error Unhandled Runtime Error TypeError: branch is not a function

const settingsFormik = useFormik({ initialValues: { type: '', account: '', opening_balance: '', account_name: '', account_number: '' }, validationSchema: Yup.object().shape({ type: Yup.string().required('Account type is required'), account: Yup.string(), // Optional field opening_balance: Yup.number().typeError('Opening balance must be a number').required('Opening balance is required else enter 0'), account_number: Yup.string().when('type', { is: 'bank', then: Yup.string().required('Account number is required'), otherwise: Yup.string().notRequired(), }), account_name: Yup.string().when('type', { is: 'bank', then: Yup.string().required('Account name is required'), otherwise: Yup.string().notRequired(), }) }) })

[PatrycjuszNowaczyk]

Hey @Master-Daniel . My team run into same issue. Solution was quite simple. W use Formik with YUP for validation schema. We have upgraded both, and then error occurs. I had to downgrade YUP library to previous version, due to incompatibility between versions pre v1.0 and versions 1... At the moment of writing it looks like it works. There is a link to YUP NPM https://www.npmjs.com/package/yup.

[rushmata]

Hey @Master-Daniel I ran into this error just yesterday, and I solved the problem by converting the "is", "then" and "otherwise" clausules into an arrow function that returns the desired value. This would work in your case:

const settingsFormik = useFormik({
        initialValues: {
            type: '',
            account: '',
            opening_balance: '',
            account_name: '',
            account_number: ''
        },
        validationSchema: Yup.object().shape({
            type: Yup.string().required('Account type is required'),
            account: Yup.string(), // Optional field
            opening_balance: Yup.number().typeError('Opening balance must be a number').required('Opening balance is required else enter 0'),
            account_number: Yup.string().when('type', {
                is: () => 'bank',
                then: () => Yup.string().required('Account number is required'),
                otherwise: () => Yup.string().notRequired(),
            }),
            account_name: Yup.string().when('type', {
                is: () => 'bank',
                then: () => Yup.string().required('Account name is required'),
                otherwise: () => Yup.string().notRequired(),
            })
        })
    })

[MalikOwais123]

@rushmata thanks for the Perfect solution, It works on latest version as well.

[Master-Daniel]

Thanks for the solution i will try it out to confirm

On Fri, Jan 5, 2024 at 10:28 AM Fernando Mata @.***> wrote:

Hey @Master-Daniel https://github.com/Master-Daniel I ran into this error just yesterday, and I solved the problem by converting the "is", "then" and "otherwise" clausules into an arrow function that returns the desired value. This would work in your case: const settingsFormik = useFormik({ initialValues: { type: '', account: '', opening_balance: '', account_name: '', account_number: '' }, validationSchema: Yup.object().shape({ type: Yup.string().required('Account type is required'), account: Yup.string(), // Optional field opening_balance: Yup.number().typeError('Opening balance must be a number').required('Opening balance is required else enter 0'), account_number: Yup.string().when('type', { is: () => 'bank', then: () => Yup.string().required('Account number is required'), otherwise: () => Yup.string().notRequired(), }), account_name: Yup.string().when('type', { is: () => 'bank', then: () => Yup.string().required('Account name is required'), otherwise: () => Yup.string().notRequired(), }) }) })

— Reply to this email directly, view it on GitHub https://github.com/jaredpalmer/formik/issues/3923#issuecomment-1878370095, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATCOYIAJHB6UT52YQDBGGGTYM7BUXAVCNFSM6AAAAABAFZ4LH2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZYGM3TAMBZGU . You are receiving this because you were mentioned.Message ID: @.***>

[user4302]

i thought it worked for me too when the condition is true, but it doesnt show the validation even when the condition is false, any idea why? is there a way to console log and find the value in this condition in the console output?

FormValidationSchema: {
    section3: Yup.object().shape({
      heroId: Yup.object().shape({
        hidden: Yup.boolean(),
        detail: Yup.string().when("hidden", {
          is: () => true,
          then: () => Yup.string().notRequired(),
          otherwise: () => Yup.string().required("Hero is required"),
        }),
      }),
    }),
  },

EDIT: [FIXED]

FormValidationSchema: {
    section3: Yup.object().shape({
      heroId: Yup.object().shape({
        hidden: Yup.boolean(),
        detail: Yup.string()
          .notRequired()
          .when("hidden", {
            is: (val) => val === false,
            then: (schema) => schema.required("Hero is required"),
            otherwise: (schema) => schema.notRequired(),
          }),
      }),
    }),
  },