How to scroll to field with input error after submit?

[aslanovshm]

Hello!

In vee-validate 3 it was possible to set a ref to a Validation Observer and access the refs object where all the errors were stored.

And each error had an $el property that could be used as an anchor for the scroll position

scrollIntoView(this.$refs.observerRef.refs[err[0].key].$el, {
  behavior: 'smooth',
  block: 'start'
})

There is no refs object in vee-validate 4 and as I understand it is not recommended to use it at all. What is the alternative how to make scrolling to the field with an error?

I searched for my problem in the discussions, but to my surprise I did not find it.

[logaretm]

The docs doesn't really discourage you from using refs if they work for you then sure. They only discourage it for doing form actions.

In v4 there is a concept of invalid submissions with that you could easily implement scroll behavior.

function onInvalidSubmit({ values, errors, results }) {
  const firstErrorFieldName = Object.keys(errors)[0];
  const el = document.querySelector(`[name="${firstErrorFieldName}"]`);
  if (el) {
    el.scrollIntoView();
  }
}