Yup validation access parent.parent

Question

I'm using yup module for validate my form. I would like access to parent for test the value.

My schema :

enabled: yup.boolean(),
contactDetail: yup.object().shape({
  phoneNumber1: yup.string().nullable(),
  phoneNumber2: yup.string().nullable(),
  email: yup.string().test('email', 'test', async function() {
    // test enabled value
  })
}),

The method when can access on same level, not the parent.

Anyone have an idea ?

Tory

Did you find a solution? – Epirogeny

@NidaMunir I have added my answer. This might help you :) – Alius

Answer 1

I came through similar issue. I used this workthrough with success.

Idea: Pass whole form-data as a context to the schema and access any form value using

this.options.context

  const schema = yup.object().shape({
        enabled: yup.boolean(),
        contactDetail: yup.object().shape({
          phoneNumber1: yup.string().nullable(),
          phoneNumber2: yup.string().nullable(),
          email: yup.string().test('email', 'test', async function () {
            // this.options.context.enabled
           
          }),
        }),
      });

Passing Context

Without Formik

Send your Form data as a context while validating

 schema.validateSync(data, {context: form_data})

With Formik

Use validate instead of validationSchema

Pass your Form data as 4th argument in validateYupSchema which represents context and can be accessed later in schema.

Pass your schema as 2nd argument in validateYupSchema.

    <Formik
      validate={(value) => {
        try {
          validateYupSchema(value, schema, true, value);
        } catch (err) {
          return yupToFormErrors(err); //for rendering validation errors
        }

        return {};
      }}

       onSubmit={} />

Following is for the asynchronous validation with Formik.

    <Formik
      validate={async (value) => {
        try {
          await validateYupSchema(value, schema, false, value);
        } catch (err) {
          return yupToFormErrors(err); //for rendering validation errors
        }

        return {};
      }}

       onSubmit={} />

Alius

Answer 2

You can use .test() and this.from

    .test('customValidation', 'Error', function(val) {
          const { from } = this; // from[0] contains siblings, from[1] parent 
          return !!from[1].value // insert your logic here

Source: https://github.com/jquense/yup/pull/556#issuecomment-641913935

Chase

Answer 3

You can use the test method available in the https://github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema . like below example, you can access one level of parent details inside test() using this.parent.

amount: Yup.string().test('amount-test3', 'amount is required', function (value) {
                    const { description } = this.parent;
                    return !(!!description && !Number(value));
                  })

Malformation

this.parent also returns the siblings, and not the parents siblings (parent.parent) – Pinwork