How to easily identify the validation error if error message handling is not done right.

[rwankar]

I'm using latest yup with react-hook-forms and MUI. Sometimes, developers make a mistake of not passing the error to the UI component. If clicking on form submit causes a validation error, the form doesn't submit but there's no "easy" way to know which field is causing the error.

In a recent case, I had a form with about 20 fields. I finally wrote a validation function and then added a Validate button to the form which would log the validation error.

const validateSchemaManually = () => {
  const formValues = getValues();
  schema
    .validate(formValues, { abortEarly: false })
    .then((validatedData) => console.log('Valid Data:', validatedData))
    .catch((err) => console.log('Validation Errors:', err.errors));
};

<FormWrapper>
  <FormProvider {...form}>
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields */}
      <button type="button" onClick={validateSchemaManually}>
        Validate
      </button>
    </form>
  </FormProvider>
</FormWrapper>;

I was able to find the issue with this.

Is there a way to make yup log the validation error? Or is there a way to provide a callback that will log the error?