Unable to understand why form is invalid but there are no errors inside the error object

[iongion]

Using

• yup 1.0.2
• @hookform/resolvers 2.9.11
• react-hook-form 7.43.5

Having this schema

const TournamentSchema = object({
  TournamentID: number().defined().required(),
  LeagueID: number().defined().required(),
  League: LeagueSchema.defined().required(),
  SeasonID: number().defined().required(),
  Season: SeasonSchema.defined().required(),
  Name: string().defined().required().min(1),
})

When using resolver: yupResolver(TournamentSchema) on a form that has all fields declared, except LeagueID and SeasonID - it fails, as it should. But there are no errors at all inside the error object and it is impossible to debug. The devtools don't report them either.

As soon as I am using this kind of resolver from the docs, I can see all errors in the console output

const useYupValidationResolver = (validationSchema: any) =>
  useCallback(
    async (data: any) => {
      try {
        const values = await validationSchema.validate(data, {
          abortEarly: false,
        });
        console.log("validation ok", values);
        return {
          values,
          errors: {},
        };
      } catch (errors) {
        const errorsMap = (errors?.inner || []).reduce(
          (allErrors, currentError) => ({
            ...allErrors,
            [currentError.path || currentError.type || "validation"]: {
              type: currentError.type ?? "validation",
              message: currentError.message,
            },
          }),
          {}
        );
        console.error("errors in catch", JSON.stringify(errors, null, 2), errorsMap);
        return {
          values: {},
          errors: errorsMap,
        };
      }
    },
    [validationSchema]
  );

Then in render

console.debug(">> render", formState.errors, formState.isValid);

• In which isValid is false as it should
• errors is empty, it should actually have

{
  "LeagueID":  {type: 'typeError', message: 'LeagueID must be a `number` type, but the final value was: `NaN`.'}
  "SeasonID": {type: 'typeError', message: 'SeasonID must be a `number` type, but the final value was: `NaN`.'}
}

Now the situation is totally normal, but why is the error object empty ?

[jorisre]

Can you share a reproducible example vi CodeSandbox please?

[iongion]

Thanks - here it is, not that minimal

https://codesandbox.io/s/elated-frog-uilb2s?file=/src/App.tsx

[leapful]

@iongion

Please read carefully the documentation

Error can only be mapped if it was registered with react-hook-form. In your example, even with built-in yup resolver or your custom yup resolver, there is only one input "Name" has been registered, therefore react-hook-form cannot validate and show error of what it does not know.

[7system7]

I have the same issue, and maybe I misunderstand something, but I cannot solve this issue on this form.

I have simple a resolver:

yupResolver(
  yup
    .object()
    .shape({
      withdrawalType: yup
        .string()
        .required(t('resources.users.edit.withdrawal.dialog.validation.type')),
    })
    .required(),
)

And I have only one input field what is a MUI `ButtonGroup ̇, and when I see this code's output:

const { watch, getFieldState, getValues } = useFormContext();
const { dirtyFields, isValid } = useFormState();

console.log(
  watch(),
  isValid,
  getFieldState('withdrawalType'),
);

I got this:

Object { withdrawalType: "/api/withdrawal_types/2" }
false 
Object { invalid: false, isDirty: true, isTouched: true, isValidating: false, error: undefined }

My question is, what have I missed? (Now, I have a workaround for this, to see all field states...)

[7system7]

If somebody else got similar issue and for the future of me: One reason is that, if one of your input field became uncontrolled and controlled OR you disable and enable a field, then the react-hook-form will think that field is dirty. There was an explanation somewhere in this repo but now I cannot find.

[AmanL04]

This does make a ton of sense. I'll investigate the issue I've mentioned here for this behaviour and add a reply if that sorts the issue. Thank you @7system7

[AmanL04]

Using

zod 3.25.32
@hookform/resolvers 5.0.1
react-hook-form 7.56.4

Issue description

I'm facing the same issue. In my case, I have the validation mode as onSubmit and revalidateMode as onChange

When I click submit, there are no errors shown but it's not in valid state. As soon as I change some value (does not matter which one) and submit again, it becomes valid.

I did a JSON diff of form values & form changes, for the above 2 cases and the only change was the latest value that I changed.

PS: I'm sure this is something that I'm missing or have done wrong but there has to be a better way to help debug.

Workaround Code

As a workaround, in my submit function I check if the form is invalid and there are no form errors then I just call form.trigger() and then recursively call the submit function again with the retry flag as false.

  const onFormSubmit = useCallback(
    async (data: T, retry: boolean = true) => {
      console.log({
        formState: form.formState,
        isValid: form.formState.isValid,
        isDirty: form.formState.isDirty,
        errors: form.formState.errors, // IMP: I log the errors in the form.handleSubmit fn as well, it has the same values
        values: form.getValues(),
        whatAreTheChanges: form.formState.dirtyFields,
        data,
      });
      if (!form.formState.isValid) {
        if (Object.keys(form.formState.errors).length > 0) {
          toast.error("Please fix the errors before saving.");
        } else {
          // HACK: Sometimes the form is invalid even if there are no errors
          // This is a hack to trigger the form to validate again
          // TODO: Find a better way to do this
          console.log("Retry", retry, "isDirty", form.formState.isDirty);
          if (retry) {
            await form.trigger();
            console.log("Count in if", retry, "isDirty", form.formState.isDirty);
            await onFormSubmit(data, false);
          }
        }
        return;
      }
      if (form.formState.isDirty) {
        await onSubmit(data);
        form.reset(data);
      }
    },
    [form, onSubmit]
  );

RHF HandleSubmit

<Form {...form}>
    <form
      onSubmit={form.handleSubmit(
        (data) => onFormSubmit(data),
        (errors, event) => {
          console.log("Errors", errors, "Event", event);
        }
      )}
    >
    ...
    </form>
</Form>
        

[myro-tv]

try trigger the form validation again once all the values are set
this worked for me