Vee-validate: Validator automatically invalidates everything after vue store is reset

[maisnamraju]

Versions:

• VueJs: "^2.1.0"
• Vee-Validate: "^2.0.0-beta.22",

Description:

I have a store and custom elements and I want to validate the fields only upon submit, The validator works fine when I submit the first time and errors are thrown and removed based on the rules but once the data has been submitted via ajax and the store resets itself to the initial state, I am unable to clear the errors, a look at the this.errors show that the error array is empty but all the fields that I have are showing errors which shouldn't be happening. using the this.errors.clear() also doesn't help.

Steps To Reproduce:

<form class="form-horizontal" @submit.prevent="submit">
                <div class="form-body">
                    <div class="form-group" :class="{'has-error': errors.has('user') }">
                      <label class="col-md-3 control-label">Assign To: </label>
                      <div class="col-md-8">
                          <multiselect
                            name="user"
                            data-vv-name="user"
                            :options="users"
                            v-model="assignSuiteForm.user"
                            v-validate="'required'"
                            placeholder="Select a User"
                            :close-on-select="true"
                            :searchable="true"
                            track-by="name"
                            label="name"
                          >
                          <p class="text-danger" v-if="errors.has('user')">{{ errors.first('user') }}</p>
                      </div>
                    </div>
                    <div class="form-group" :class="{'has-error': errors.has('dueDate') }">
                     <label class="col-md-3 control-label">Due Date:</label>
                      <div class="col-md-8">
                          <Flatpickr class="form-control"
                            v-validate
                            data-vv-rules="required"
                            data-vv-value-path="assignSuiteForm.due_date"
                            data-vv-name="dueDate"
                            name="dueDate"
                            :options="dateOptions"
                            v-model="assignSuiteForm.due_date"
                            placeholder="Select Due Date"/>
                          <p class="text-danger" v-if="errors.has('dueDate')">{{ errors.first('dueDate') }}</p>
                      </div>
                    </div>
                    <div class="form-group" :class="{'has-error': errors.has('comment') }">
                      <label class="col-md-3 control-label">Comment:</label>
                      <div class="col-md-8">
                                                      <quill-editor ref="myTextEditor" name="comment"
                                      v-validate
                                      data-vv-rules="required"
                                      :content="assignSuiteForm.comment"
                                      v-model="assignSuiteForm.comment"
                                      data-vv-value-path="assignSuiteForm.comment"
                                      data-vv-name="comment"
                                      :config="editorOption"
                                      >
                              </quill-editor>
                              <p class="text-danger" v-if="errors.has('dueDate')">{{ errors.first('comment') }}</p>
                      </div>
                    </div>
                </div>
                <div class="form-actions">
                        <div class="row">
                            <div class="col-md-4 col-md-offset-3">
                                <button type="submit"
                                        class="btn btn-lg blue"
                                        @click.prevent="submit"
                                        :disabled="busy">
                                    <span v-if="busy">Assigning</span>
                                    <span v-else>Assign Suite</span>
                                </button>
                            </div>
                        </div>
                  </div>
            </form>

export default {
    computed:{
      ...mapGetters({
          users: 'users',
          assignSuiteForm: 'assignSuiteForm',
          busy: 'suiteBusy',
          successful: 'suiteSuccessful',
         })
    },
    components: {
      Multiselect,
      quillEditor
    },
    data() {
        return {
          dateOptions: {
              defaultDate: new Date()
          }
        };
    },
    watch:{
      'successful': 'successHandler',
      'error': 'errorHandler'
    },
    methods:{
        submit(){
            this.$validator
                .validateAll()
                .then( (success) => {
                  if(!success) return;
                  this.assignSuite();
                })
                .catch( (error) => {
                });
        },
        assignSuite() {
          this.assignSuiteForm.suite_id = this.$route.params.id;
          this.assignSuiteForm.current_user_id = this.currentUserId;
        },
        successHandler(success){
          if(!success) return;
          console.log(JSON.stringify(this.errors)); // gives out 
          swal({title: 'Suite was successfully assigned to the selected user'});
         },
          errorHandler(errors) {
          if(!errors) return;
          if(errors || errors.name){
            swal({title:`The suite couldn't be copied`,text: `${errors.name[0]}`,type:'error'});
          }
        }
    }
  }

I think the image would explain it better, I am not sure if it's me missing the documentation or the validator doing something wrong.
http://imgur.com/a/3wT9t

[logaretm]

You can reset the errors after you submit your data or after your data are reset, but in a seperate .then call like mentioned here: #209

this fiddle shows an exmaple: https://jsfiddle.net/hcac5je0/1/

I might add a disable method on the validator or something similar if you only want to validate upon submissions.

[maisnamraju]

Thanks, ill check them out and let you know if there are any errors.

[maisnamraju]

@logaretm Got its working using a Promise but i had to go for a slightly hacky way because I'm using vuex. Would be nice if there is more support for integration with vuex in the future.

[logaretm]

@maisnamraju I agree its a bit hacky, hopefully I can think of something for vuex.