React+Formik+Yup - validate in order

[Rail_Batyrshin]

Hi!
I use Formik+Yup for my forms. I have this validation scheme that checks the domain entered by the user for correctness, and also by sending this domain to the API to check if it is on cloudflare:

const validationSchema = Yup.object().shape({
    domainName: Yup.string()
      .required('The website URL is required')
      .matches(URL_REGEX, 'Enter correct URL')
      .test('is-on-cloudflare', 'Invalid domain name', async (domainName: string) => {
        const re = /^https?:\/\//
        if (re.test(domainName)) {
          const res = await checkCloudflareStatus(domainName)
          if (res.data?.on_cloudflare) {
            return true
          }
        }
        return false
      }),
  })

How can I trigger a domain verification request in API only after it has passed other validations, but not in parallel?

 

[Rail_Batyrshin]

Found this solution:

const firstValidation = Yup.string()
    .required('The website URL is required')
    .matches(URL_REGEX, 'Enter correct URL')
  const validationSchema = Yup.object().shape({
    domainName: firstValidation
      .test('is-on-cloudflare', 'Invalid domain name', async (domainName: string) => {
        if (await firstValidation.isValid(domainName)) {
          const res = await checkCloudflareStatus(domainName)
          return Boolean(res.data?.on_cloudflare)
        }
        return true
      }),
  })