Vee-validate: Focus on Errors

[anudwigna]

Versions:

• VueJs: 2
• Vee-Validate:

Description:

Is There any way to focus on first error after submitting the form?
It is for large forms where i submit the button at the end of the form and the errors occurred are not in current view.

[logaretm]

I guess you have to implement it yourself, maybe in the catch callback you can analyze the error bag and focus/scroll to the element.

I plan to add some sort of validation object to be passed to the catch callbacks, that contains useful information about the errors encountered, I could add references to the element which should make it easier for you to scroll/focus on that element.

[anudwigna]

Thanks for the reply! I implemented my own solution for this.
Thank You!

[escapedcat]

@anudwigna we added something like this to the validate function, because we added error classes to our input-components anyway:

const errorFirst = this.$el.querySelector('.js-error')
if (errorFirst) {
  const errorFirstInput = errorFirst.querySelector('input, select')
  errorFirst.scrollIntoView({ behavior: 'instant' })
  errorFirstInput.focus()
}

What was your solution? I'm sure this can be nicer.

[TomFranssen]

When there are errors VueJs gives a list of error with ID's.
That ID is also set on the element as an data-vv-id="ID" attribute.
You can use this code to focus on the element:
this.$el.querySelector('[data-vv-id=' + this.$validator.errors.items[0].id + ']').scrollIntoView()

[VRuzhentsov]

this.$el.querySelector('[data-vv-id="' + this.$validator.errors.items[0].id + '"]').scrollIntoView(false)
Works with double quotes, and maybe boolean scroll position will be usefull

[victorjonsson]

I didn't find any data-vv-id attribute when running vee-validate 2.1.0-beta. I had to use item[x].field together with data-vv-name instead.

this.$el.querySelector('[data-vv-name="' + 
   this.$validator.errors.items[0].field + '"]').scrollIntoView(false)

[logaretm]

data-vv-id was removed due to it breaking snapshot tests due to inconsistent render results. This is a deal breaker for tests.

[yaakovp]

just to document it: you can use this.$el.querySelector("[aria-invalid=true]");

[davidjnorth]

Any ideas how one would accomplish this for Vee-Validate 3.0?

[zefexdeveloper]

@logaretm Any idea on how to accomplish this for 3.0 as @davidjnorth asked?

[davidjnorth]

Thanks @zefexdeveloper. I managed to do it as explained here https://github.com/logaretm/vee-validate/issues/2248

Using this.$refs.observer.ctx.errors

[zefexdeveloper]

@davidjnorth Is it possible for you to show how to managed the focusing/scrolling? I mean I understand that this.$refs.observer.ctx.errors gets the errors but how did you manage the actual focusing?

Thank you

I did like this, but I'm sure it's right:

            const valid = await this.$refs.form.validate()

            if (!valid) {
                const [first] = Object.keys(this.$refs.form.errors)

                this.$refs[first].focus()
            }

[coderAB]

const errorFieldName = this.$validator.errors.items[0].field;
console.log(errorFieldName);
this.$refs[errorFieldName].focus();

[zefexdeveloper]

@coderAB I don't think it's right. this.$refs.observer.errors.items is undefined. What is this $validator?