Hide/delay password confirmation error in Vee vali

问题:

When I use Vee-validate library in Vuejs, when I focus on password field, it show the error not match with password confirm.

My code:

   <input v-validate="'required|min:6|confirmed'" type="password" class="form-control" id="password" name="password" placeholder="New Password" v-model="password"></input>
         <span class="is-danger" v-if="errors.has('password')">{{errors.first('password')}}</span>

    <input v-validate="'required'" type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Verify password">

How can I use it and do not display the errors until focus password confirm field?

回答1:

Okay, I searched for the solution longer than I should but there doesn't seem a built-in way in vee-validate, so I came up with my own solution.

Vue.use(VeeValidate)

new Vue({
 el: '#app',
 data: {
   password: '',
   password_confirmation: ''
 },
 
 computed: {
   onConfirm () {
      if(this.errors.items.length){
        return this.errors.items.find(f => {
          return f.rule !== "confirmed"
        })
      }
   }
 }
})

<script src="https://unpkg.com/vee-validate@2.0.5/dist/vee-validate.js"></script>
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>


<div id="app">
  <input v-validate="'required|min:6|confirmed'" 
      type="password" 
      class="form-control" 
      id="password" 
      name="password" 
      placeholder="New Password" 
      v-model="password">
    </input>

  <span class="is-danger" 
    v-if="errors.has('password') && onConfirm">
      {{errors.first('password')}}
    </span>
    <input v-validate="'required'" 
    type="password" 
    class="form-control" 
    id="password_confirmation" 
    name="password_confirmation" 
    placeholder="Verify password" 
    v-model="password_confirmation"
  >
  <span class="is-danger" 
    v-if="!onConfirm  && 
    password_confirmation">
      {{errors.first('password')}}
    </span>
</div>