Error : branch is not function in version Yup 1.0

[anardil]

Hello,

I try to put conditional validation with Vee-validate and Quasar framework.
It works fine when I use Yup 0.32.11 but when I switched on version > 1.0 for Yup.
I got this error:
Uncaught (in promise) TypeError: branch is not a function
Here is the sanbox => https://codesandbox.io/s/vee-validate-v4-with-quasar-framework-forked-jc7mbk?file=/src/App.vue:0-1967. You will see the error.

But if you select in dependencies the version for Yup 0.32.11, it will works.
Someone can help please?
Thank you.

[jquense]

please read the docs, changelog, migration instructions, and try and search past issues before opening up new issues

[mortezasabihi]

@anardil
You need to change the schema to the following:

const schema = yup.object({
    name: yup.string().label("Your name").when("checkbox", {
      is: true,
      then: schema => schema.required(),
      otherwise: schema => schema.optional(),
    }),
    checkbox: yup.boolean().label("If checked put your name below"),
  });

[iqtedar123]

If its not clear, you need to use function notation for then and otherwise.

[enkhee]

  Hello,

It works fine when I use Yup 0.32.11 but when I switched on version > 1.3. for Yup. help
validationSchema={Yup.object({
phone: Yup.string().when("loginType", {
is: "phone",
then: (schema) =>
schema
.required(t("validation_contact_phone_required"))
.checkCustomerPhone(t("validation_phone_type")),
otherwise: Yup.string().nullable(),
}),
customerEmail: Yup.string().when("loginType", {
is: "email",
then: (schema) =>
schema
.email(t("validation_contact_email_type"))
.max(255)
.required(t("validation_contact_email_required")),
otherwise: Yup.string().nullable(),
}),
})} Yup.addMethod(Yup.string, "checkCustomerPhone", function (errorMessage) {
return this.test(checker-phone, errorMessage, function (value) {
const twoNumbers = value?.toString()?.slice(0, 2);
let booleanValue = false;
if (item?.value === "976") {
MglPhoneStart.filter((mgl) => {
mgl === twoNumbers && value?.toString()?.length === 8
? (booleanValue = true)
: "";
});
} else {
booleanValue = true;
}
return booleanValue;
});
});