Yup validation of an array - values required only if array length is bigger than 1

Question

I have 2 dropdowns in each row and I can dynamically add and remove rows apart form the first one. I would like to submit form if there is only one row (rendered from the beginning) and it is empty and not be able to submit if:

value1 is selected without value 2

or

a new row is added but has no value selected

I am using yup validation.

I have tried with checking the length with .test(), but this test run always after checking 'required'.

This is what I would like to have:

const validationSchema = yup.object({
values:
    yup.array()
        .of(
            yup.object({
                value1: yup.string().required(), // ONLY IF ARRAY LENGTH > 1
                value2: yup.string().required()// ONLY IF VALUE1 IS SELECTED
            })
        )});

Cuong Vu · Accepted Answer · 2022-01-05 09:29:37Z

4

If I understand you correctly, then this should do.

const mySchema = yup.object({
  values: yup.array().of(
    yup.object({
      value1: yup
        .string()
        .test(
          "test-1",
          "error: required if array length > 1",
          (value, context) => {
            const [, values] = context.from;
            const {
              value: { values: arrayValues }
            } = values;
            // ONLY IF ARRAY LENGTH > 1
            if (arrayValues.length > 1) {
              // valid only if value is provided
              return !!value;
            }
          }
        ),
      value2: yup.string().when("value1", {
        // if value1 is provied, value2 should be provided too
        is: (value1) => !!value1,
        then: (value2) => value2.required()
      })
    })
  )
});

 // should pass
  console.log(
    mySchema.validateSync({
      values: [
        { value1: "1", value2: "2" },
        { value1: "1", value2: "2" }
      ]
    })
  );
  // ValidationError: error: required if array length > 1
  console.log(
    mySchema.validateSync({
      values: [{ value1: "1", value2: "2" }, { value2: "2" }]
    })
  );

  // ValidationError: values[1].value2 is a required field
  console.log(
    mySchema.validateSync({
      values: [{ value1: "1", value2: "2" }, { value1: "1" }]
    })
  );

The key thing here is to remove .required() and provide your own check in test() when the array meets your custom condition.

to access the parent value inside of .test(), use context.from

const [parent1, parent2, ...rest] = context.from;

Live Example

answered Jan 5, 2022 at 9:29

Cuong Vu

3,72316 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aggat Over a year ago

Thank you. Could you please explain me more the part with context.from? I don't know how to use the last line so that I don't get an error 'Property 'from' does not exist on type 'TestContext<AnyObject>'.'

Collectives™ on Stack Overflow

Yup validation of an array - values required only if array length is bigger than 1

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related