[Vuejs]-How to debounce/delay showing error message in vee-validate

0👍

Upgrade to the latest versions of Vue & VeeValidate, then continue using: data-vv-delay:

Vue.use(VeeValidate)

new Vue({
  el: '#app',
})
.is-error {
  border: 2px solid red;
}

.form-group {
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.17/vee-validate.js"></script>

<div id="app">

  <div class="form-group">
    
  <label class="label" for="email">Email</label>
  
  <input 
         v-validate
         data-vv-rules="required|email"
         :class="{'is-error': errors.has('email') }"
         name="email"
         type="text"
         data-vv-delay="2000"
         placeholder="Email">
    
  <span v-show="errors.has('email')">
    {{ errors.first('email') }}
  </span>

  </div>

  <div class="form-group">
  
  <label class="label" for="number">Number</label>
  
  <input 
    v-validate
    data-vv-rules="required|numeric"
    :class="{'is-error': errors.has('number') }"
    name="number"
    type="number"
    data-vv-delay="2000"
    placeholder="Number">
    
  <span v-show="errors.has('number')">
    {{ errors.first('number') }}
  </span>

  </div>

</div>

The above snippet threw some errors when using your version (Vue 2.1.0 & VeeValidate beta 14). The issue seems to lie with beta 14 being a bit dodgy!

Leave a comment