Global submit error hook or event handler

[valqelyan]

Is your feature request related to a problem? Please describe.

I want to globally handle failed submissions, for example:

• Scroll to the first field with an error
• Trigger a toast or highlight the error section
• Perform analytics or tracking on form failure

Currently, I need to manually handle this for each form, which becomes repetitive across larger apps.

Describe the solution you'd like
Something like:

onSubmitFailed(({ errors, fields }) => {
  // Scroll to first error, show toast, etc.
});

Describe alternatives you've considered

[valqelyan]

I didn’t know you could pass a second function to the submit handler. I found it by accident while looking at the docs for the <Form> component, where I saw @invalid-submit.

My current workaround.

export const onInvalidSubmit = ({ errors }) => {
  const [firstError] = Object.keys(errors)

  if (firstError) {
    document.getElementById(firstError)?.scrollIntoView()
  }
}

// ...

import { onInvalidSubmit } from '~/helpers/scrollIntoErrors'

const onSubmit = handleSubmit(async (values, { resetForm }) => {
  // ....
}, onInvalidSubmit)