Conditional validation not working in useFieldArray

[giorgiEconsul]

Hi, I have an issue where i use react hook form with zod and need validation that is conditional (when checkbox is checked it should not validate certain field). I have implemented this in other forms and it uses identical logic except they are not using FieldArray and is not an array. Any suggestion is appreciated (conditional field is middle_name)

This is the schema
import { z } from 'zod';

export const childrenSchema = (t: (key: string) => string) => {
  return z.object({
    children: z.array(
      z
        .object({
          id: z.number().nullable(),
          first_name: z.string().min(1, t('form.errors.first_name.required')),
          last_name: z.string().min(1, t('form.errors.last_name.required')),
          hasNoMiddleName: z.boolean(),
          middle_name: z
            .string()
            .min(1, t('form.errors.middle_name.required'))
            .regex(/^[A-Za-z]+$/, t('form.errors.middle_name.regex')),
          birth_date: z.date({ error: t('form.errors.birth_date.required') }),
          birth_country: z
            .string()
            .min(1, t('form.errors.birth_country.required')),
          birth_city: z.string().min(1, t('form.errors.birth_city.required')),
          gender: z.string().min(1, t('form.errors.gender.required')),
        })
        .refine(
          (data) => data.hasNoMiddleName || data.middle_name.trim().length > 0,
          {
            message: t('form.errors.middle_name.required'),
            path: ['middle_name'],

            when(payload) {
              if (payload.value === undefined || payload.value === null)
                return false;
              return payload.issues.every(
                (iss) =>
                  iss.path?.[0] !== 'middle_name' &&
                  iss.path?.[0] !== 'hasNoMiddleName'
              );
            },
          }
        )
    ),
  });
};

export type ChildrenFormValues = z.infer<ReturnType<typeof childrenSchema>>;

component where it is used in custom hook

import React from 'react';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { FormProvider } from 'react-hook-form';
import ControlledTextInput from '@/components/shared/forms/controlled/ControlledTextInput';
import DisableableControlledTextInput from '@/components/shared/forms/controlled/DisableableControlledTextInput';
import ControlledDatePicker from '@/components/shared/forms/controlled/ControlledDatePicker';
import { GenderRadioButtons } from '@/components/shared/forms/GenderRadioButtons';
import ControlledCombobox from '@/components/shared/forms/controlled/ControlledCombobox';
import { ChildrenFormValues } from '@/schema/childValidationSchema';
import { useChildrenForm } from '@/hooks/forms/useChildrenForm';
import { cn } from '@/lib/utils';
import LoadingSpinner from '@/components/shared/loading/LoadingSpinner';
import FormSubmitButtons from '@/components/shared/forms/FormSubmitButtons';
import ChildrenHeader from '@/components/pages/dashboard/application/children/ChildrenHeader';
import ErrorText from '@/components/shared/ErrorText';
import UnsavedChangesDialog from '@/components/shared/UnsavedChangesModal';

export default function ChildrenAccordion() {
  const {
    form,
    t,
    onSubmit,
    countriesData,
    isChildrenLoading,
    isCountriesLoading,
    createChildrenPending,
    childrenError,
    countriesError,
    cancelLeave,
    confirmLeave,
    showPrompt,
    fields,
  } = useChildrenForm();

  if (isCountriesLoading || isChildrenLoading) {
    return <LoadingSpinner className='w-8 h-8' />;
  }

  if (childrenError || countriesError) {
    return <ErrorText error={childrenError || countriesError} />;
  }

  console.log(form.formState.errors);
  return (
    <>
      <ChildrenHeader />
      <FormProvider {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className='flex flex-col gap-8'
        >
          <Accordion
            defaultValue={['child-0']}
            type='multiple'
            className='space-y-4'
          >
            {fields.map((field, index) => {
              const { errors } = form.formState;
              const childErrors = errors.children?.[index];
              return (
                <AccordionItem key={field.id} value={`child-${index}`}>
                  <AccordionTrigger
                    className={cn(
                      'font-geo text-green-500 text-base hover:no-underline cursor-pointer border border-input-border px-3',
                      !!childErrors && 'border-red-400'
                    )}
                  >
                    {t('child')} {index + 1}
                  </AccordionTrigger>
                  <AccordionContent className='mt-3 px-0.5 flex flex-col gap-2 pb-0 pt-2'>
                    <ControlledTextInput<ChildrenFormValues>
                      name={`children.${index}.first_name`}
                      type='text'
                      label={t('form.first_name.label')}
                    />
                    <ControlledTextInput<ChildrenFormValues>
                      name={`children.${index}.last_name`}
                      type='text'
                      label={t('form.last_name.label')}
                    />
                    <DisableableControlledTextInput<ChildrenFormValues>
                      name={`children.${index}.middle_name`}
                      checkboxName={`children.${index}.hasNoMiddleName`}
                      type='text'
                      label={t('form.middle_name.label')}
                      CheckboxText={t('form.middle_name.checkbox')}
                      required={false}
                    />
                    <ControlledDatePicker<ChildrenFormValues>
                      name={`children.${index}.birth_date`}
                      disableFuture
                      label={t('form.birth_date.label')}
                    />
                    <GenderRadioButtons<ChildrenFormValues>
                      label={t('form.gender.title')}
                      name={`children.${index}.gender`}
                    />
                    <ControlledCombobox<ChildrenFormValues>
                      options={countriesData}
                      name={`children.${index}.birth_country`}
                      label={t('form.birth_country.label')}
                    />
                    <ControlledTextInput<ChildrenFormValues>
                      name={`children.${index}.birth_city`}
                      type='text'
                      label={t('form.birth_city.label')}
                    />
                  </AccordionContent>
                </AccordionItem>
              );
            })}
          </Accordion>
          <FormSubmitButtons
            isPending={createChildrenPending}
            slug='children-info'
          />
        </form>
        <UnsavedChangesDialog
          open={showPrompt}
          onConfirm={confirmLeave}
          onCancel={cancelLeave}
        />
      </FormProvider>
    </>
  );
}

How useForm is implemented in useChildrenForm custom hook

const form = useForm<ChildrenFormValues>({
    resolver: zodResolver(childrenSchema(t)),
    defaultValues: {
      children: [],
    },
  });

  const { fields } = useFieldArray({
    control: form.control,
    name: 'children',
  });

[BrendanC23]

If you want to have a conditional check based on hasNoMiddleName, you need to move the validation from middle_name to be outside of the object. This way, it has access to both fields.

z.object({
    hasNoMiddleName: z.boolean(),
    middle_name: z.string()
}).superRefine((data, ctx) => {
    if (!data.hasNoMiddleName) {
        if (data.middle_name.length <= 1) {
            ctx.addIssue({
                code: "custom",
                message: t('form.errors.middle_name.required'),
                path: ["middle_name"],
            });
        } else if (!/^[A-Za-z]+$/.test(data.middle_name)) {
            ctx.addIssue({
                code: "custom",
                message: t('form.errors.middle_name.regex'),
                path: ["middle_name"],
            });
        }
    }
});