Scroll on error with v4 useForm?

[9mm]

I want to scroll to the first input that has an error. Currently I'm doing this:

  <form @submit.prevent="onSubmit">
    ...
  </form>

Setup:

  setup() {
    const {
      values,
      setFieldValue,
      handleSubmit,
    } = useForm({
      initialValues,
      validationSchema,
    });

    const onSubmit = handleSubmit(async fields => {
      ...
    });

[9mm]

Hey @logaretm would you be able to point me to the function where I might do this?

[logaretm]

Check Handling Invalid Submissions. With the information passed in the invalid callback you can try to locate the element and scroll to it.

const onSubmit = handleSubmit(async fields => {
  // ...
  }, ({ errors }) => {
  const fieldName = Object.keys(errors)[0];
  // assumes your fields has an `id` attribute equal to their names.
  document.querySelector(`#${fieldName}`)?.scrollIntoView();
});

[9mm]

Wow....... I stared at the docs for useForm for so long, I don't know how I missed that. Thank you