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

Total
28
Shares

I am using following versions:

"vue": "^2.1.0",
"vee-validate": "2.0.0-beta.14",

How do I debounce display of an error message.

I tried delay, v-delay and few other in following code but nothing seems to work.

<input type="number" v-validate data-rules="required|numeric" name="number" delay="1800"/>

In earlier version this used to happen via data-vv-delay.


Solution

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

_x000D_

_x000D_

Vue.use(VeeValidate)_x000D_
_x000D_
new Vue({_x000D_
  el: '#app',_x000D_
})

_x000D_

.is-error {_x000D_
  border: 2px solid red;_x000D_
}_x000D_
_x000D_
.form-group {_x000D_
  margin-top: 20px;_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>_x000D_
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.17/vee-validate.js"></script>_x000D_
_x000D_
<div id="app">_x000D_
_x000D_
  <div class="form-group">_x000D_
    _x000D_
  <label class="label" for="email">Email</label>_x000D_
  _x000D_
  <input _x000D_
         v-validate_x000D_
         data-vv-rules="required|email"_x000D_
         :class="{'is-error': errors.has('email') }"_x000D_
         name="email"_x000D_
         type="text"_x000D_
         data-vv-delay="2000"_x000D_
         placeholder="Email">_x000D_
    _x000D_
  <span v-show="errors.has('email')">_x000D_
    {{ errors.first('email') }}_x000D_
  </span>_x000D_
_x000D_
  </div>_x000D_
_x000D_
  <div class="form-group">_x000D_
  _x000D_
  <label class="label" for="number">Number</label>_x000D_
  _x000D_
  <input _x000D_
    v-validate_x000D_
    data-vv-rules="required|numeric"_x000D_
    :class="{'is-error': errors.has('number') }"_x000D_
    name="number"_x000D_
    type="number"_x000D_
    data-vv-delay="2000"_x000D_
    placeholder="Number">_x000D_
    _x000D_
  <span v-show="errors.has('number')">_x000D_
    {{ errors.first('number') }}_x000D_
  </span>_x000D_
_x000D_
  </div>_x000D_
_x000D_
</div>

_x000D_

_x000D_

_x000D_

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 Reply

Your email address will not be published. Required fields are marked *