CODEWITHSUNDEEP
vue.jsnuxt.jsvee-validate
vvxcoder
vvxcoder

Reputation: 339

How to solve Validation error after submit

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();
              ...

Upvotes: 0

Views: 1657

Answers (1)

vvxcoder
vvxcoder

Reputation: 339

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();
              ...

Upvotes: 1

Related Questions