Having schema dependent on position in array

I have a form with an array of email fields. The form starts with three fields but the user can click a button to add more. I want the first three fields to be required and subsequent fields to be optional (but still validated as emails if filled in).

So I think what I need is a one schema for the first three fields and another for the remaining fields. Trouble is I can’t work out how to determine the current array index from either when or lazy.

I could always model them as separate keys (requiredEmails: yup.array(...), optionalEmails: yup.array(...)) but I wondered if there is a better way.

[Filson14]

I don’t have identical issue, but quite similar 😉 I would like to validate an array (let’s assume that it is array of numbers) to check items’ validity based on other items. In a nutshell - if array is defined as sorted,

Any suggestions about how to get other elements’ values while validating single item?

Edit:

I’ve managed array validation with .test() method. @tamlyn, it may be helpful for Your case (but I guess it’s little to late for You 😉 ).

Short fragment of my code is below. Hope it will help someone.

const numberValidation =  yup
  .number()
  .positive("Must be positive")
  .required("Required");

const schema = yup.array(
        yup
          .object({
            price: numberValidation,
            max: numberValidation
          })
          .test("is-threshold-valid", "${path} threshold invalid", function(item) {
            const maxValue = item.max;
            const array = this.parent;
            const index = parseInt(this.path.split("[")[1].split("]")[0], 10);
            const isBigEnough = index ? maxValue > array[index - 1].max : maxValue > 0;
            const isNotToBig = index === array.length - 1 ? true : maxValue < array[index + 1].max;

            return isBigEnough && isNotToBig
              ? true
              : this.createError({path: `${this.path}.max`, message: "Incorrect"});
          })
      )

this inside test function lets us to get parent data, so in case of array we can define validation based on other elements.

[george-maged]

I had a similar issue and I solved it by creating a custom test function and checking the this.path value

emails: Yup.array().of(
            Yup.string().email('Email must be valid').test('my-test', 'Email is required', function (value) {
                return this.path === "emails[3]" || value
            })
        )

This will work if you have maximum of 4 emails but if you can add more than that you will have to string manipulate this.path to get the index

There might be a better/easier way to get the index but this was what I came up with and I hope it helps