Warm tip: This article is reproduced from stackoverflow.com, please click
vue.js nuxt.js vee-validate

How to solve Validation error after submit

发布于 2020-03-27 10:26:51

I use veevalidate rule for each input in my form. After submit with valid data, all these data have been sent successfully to backend-side, but on frontend-side each input is highlighted as it ivalid.

enter image description here

I had added reset method from veevalidate to unset any errors when submit is selected. But it don't work. Here is the part of my code

       beforeSubmit() {
       this.$validator.pause();
       this.$nextTick(() => {
          this.$validator.errors.clear();
          this.$validator.fields.items.forEach(field => 
           field.reset());
          this.$validator.fields.items.forEach(field => 
          this.errors.remove(field));
          this.$validator.resume();
           });

          this.$validator.validateAll().then((result) => {
              this.onSubmit();
              ...
Questioner
Valerii Voronkov
Viewed
71
Valerii Voronkov 2019-07-20 16:35

I came to solution: when all errors have been removed from the form in next render with $nextTick, we should replace this.$validator.resume() method with this.$validator.reset(). Thant's it. In general, the working part is

beforeSubmit() {
   this.$validator.pause();
   this.$nextTick(() => {
          this.$validator.errors.clear();
          this.$validator.fields.items.forEach(field => 
           field.reset());
          this.$validator.fields.items.forEach(field => 
          this.errors.remove(field));
          this.$validator.reset();
           });

          this.$validator.validateAll().then((result) => {
              this.onSubmit();
              ...