Error after form resetting vee validate 3

Question

I am using vee-validate 3.1.1 and vue 2.5.17.

After successful form submission I am resetting the input

this.name = ''

But validation error message shows after resetting the input like the below image

There was same problem in vee-validate 2.* I had solved that with this code

this.$nextTick(() => {
    this.errors.clear();
})  

Answer 1

//first reset your form values
this.name = '';
//then do this to reset your ValidationObserver
this.$nextTick(() => this.$refs.observer.reset());

This requires that you have your form inputs wrapped in a ValidationObserver with the attribute ref="observer". Otherwise, you'd want to call the reset method of each ValidationProvider you use, inside that same callback.

See here for the examples they give for vee-validate. The "Resetting Forms" covers what you are doing, and the next example shows what I'm talking about ("Programmatic Access with $refs").

Answer 2

Following the Vee-validate 3 documentations it is recommended to reset the form after the animation frames are requested.

You could do something like this:

methods: {
    async reset() {
       this.name = '';
       requestAnimationFrame(() => {
          this.$refs.observer.reset();
       );
    }
}

Answer 3

This is known to be a bug with VeeValidate, and for some reason it hasn't been taken care of, but making async method to first reset the variable, and next the observer, seems to make it working.

So you could stick to this work-around, until VeeValidate fix it some day.

methods: {
  async resetForm() {
    this.name = '';
    this.$refs.observer.reset();
  }
}