Order of validations

If have this validation schema that i use to validate a youtube video id as part of a multi page form wizard:

const firstPageSchema = yup.object().shape({
  youtubeId: yup
    .string()
    .min(11, 'has to be 11 characters')
    .max(11, 'has to be 11 characters')
    .matches(
      /^[a-zA-Z0-9_-]{11}$/,
      'allowed characters are letters, numbers, underscore and dash'
    )
    .test(
      'youtube-api',
      'video not found or not embeddable',
      async value => {
        const parts = 'snippet,contentDetails,status'
        const response = await fetch(
          `${YOUTUBE_API_V3}/videos?id=${value}&key=${YOUTUBE_API_KEY}&part=${parts}`
        )
        const body = await response.json()
        return body.items.length !== 0 && body.items[0].status.embeddable
      }
    )
    .required(),
})

Whenever i validate a string that has less than 11 characters, the .test is executed and tries to fetch information about the video from youtube.

I would like the .test to only run when .min, .max and .matches validation did not produce an error. How would i do that?

I tried when on the same field, but that seems to be forbidden.

[ryanjwessel]

Have there been any updates with this? Sequential validation would definitely be useful.

Also, I’m not sure but it seems like .sequence is something that was custom-built for the previous example and not part of the official yup API. Is that correct?

Edit: Should have looked at the PR created by @codepunkt before asking the question. My bad!

[evankennedy]

This would be pretty valuable. For anyone coming here wondering if they can do the same thing, you could save the ID format schema and call it within your other schema.

const youtubeIdSchema = yup.string()
  .length(11, 'has to be 11 characters')
  .matches(
    /^[a-zA-Z0-9_-]{11}$/,
    'allowed characters are letters, numbers, underscore and dash'
  );

const firstPageSchema = yup.object({
  youtubeId: youtubeIdSchema
    .test(
      'youtube-api',
      'video not found or not embeddable',
      async value => {
        if (await youtubeIdSchema.isValid(value)) {
          const parts = 'snippet,contentDetails,status';
          const response = await fetch(
            `${YOUTUBE_API_V3}/videos?id=${value}&key=${YOUTUBE_API_KEY}&part=${parts}`
          );
          const body = await response.json();
          return body.items.length !== 0 && body.items[0].status.embeddable;
        }
        return true;
      }
    )
    .required(),
});

That would double-validate the first schema, but those are simple validations so that’s probably okay.