0

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();
              ...
Valerii Voronkov
  • 339
  • 1
  • 4
  • 16

1 Answers1

1

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();
              ...
Valerii Voronkov
  • 339
  • 1
  • 4
  • 16