vee-validate: Add a way to get all errors to ValidationObserver

Is your feature request related to a problem? Please describe. I really like the changes in v3. It’s solved a lot of the issues with componentizing forms (no more inject!) and displaying errors, etc. However, I keep wanting to have some concise way to get all the errors on the page. Either for debugging or for displaying the first error on submit or scrolling the form back up to the error message, etc.

Describe the solution you’d like Add getErrors or some other interface to ValidationObserver to get some sort of error list. validate and setErrors already exists so it would seem natural to add a getErrors.

Describe alternatives you’ve considered The validate method could return more than true/false but that seems a bit kludgy. An error-model or something similar could be used to store errors based on events.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 16
Comments: 15 (5 by maintainers)

Most upvoted comments

@d3radicated, I try to check “this.$refs.observerRef.errors” right after validation() execution (in ‘then’ section), and it is empty. But if I set timeout to 100ms this.$refs.observerRef.errors has filled with correct error descriptions. If I try to get errors through ValidationProvider ref, all is Ok and I get errors immediately.

this.$refs.observerRef.validate().then(isValid => {
    console.log('isValid', isValid); // false
    console.log(this.$refs.observerRef.errors); // { Field: Array(0) }

    console.log(this.$refs.providerRef.errors); // ["Field is not valid."]

    this.$nextTick(() => {
        console.log(this.$refs.observerRef.errors);  // { Field: Array(0) }
    });

    setTimeout(() => {
        console.log(this.$refs.observerRef.errors); // { Field: Array(1) } <- correct error values here  
    }, 100);
});

Look like propagation errors from ValidationProvider-s to ValidationObserver is async task

+21

sin314 on Jan 24, 2020

If you would like to get errors after validation,

this.$refs.observerRef.validate().then(() => {
    console.log(this.$refs.observerRef.errors);
})

d3radicated on Dec 14, 2019

Current workaround until a better way is published:

this.notifications = Object.values(this.$refs.observer.ctx.errors).flat();

This will ignore the _vee_n keys and will flat their values (validation messages) into a final array.

rafaelrenanpacheco on Aug 28, 2019

Currently, you can get the errors from the slot scope of the observer. Or using $refs.observerRef.ctx.errors.

But I will think of a better way to get it soon.

logaretm on Aug 27, 2019

Tagged in 3.4.0 The validate function now automatically updates the state of the observer so timeouts are no longer neccessary after validate.

this.$refs.observerRef.validate().then(isValid => {
    console.log('isValid', isValid); // false
	// will be updated
    console.log(this.$refs.observerRef.errors);
});

validateWithInfo is also a new function available on observers, it gives you access to all errors in it’s fullfilled callback.

this.$refs.observerRef.validateWithInfo().then(({ isValid, errors })=> {
    console.log('isValid', isValid); // false
    console.log(errors);
});

logaretm on Sep 28, 2020

Workaround from @sin314 works!

jbalzar on Feb 8, 2020

Currently, you can get the errors from the slot scope of the observer. Or using $refs.observerRef.ctx.errors.

But I will think of a better way to get it soon.

$refs.observerRef.ctx.errors is helpful, thanks. It’s definitely not ideal since it returns all the inputs even if they have no errors. And the values are indexed on _vee_n which doesn’t really apply to anything on the page.

jcoby on Aug 28, 2019