Search code examples
javascriptvue.jsvuelidate

Why does error message pops up for some time when validator method returns true?


I try to simulate async validation with setTimeout method using vuelidate, but when my async method returns true value, error message pops up for some time and then hide.

There is code sandbox: https://codesandbox.io/s/angry-montalcini-suec4?fontsize=14&hidenavigation=1&theme=dark


Solution

  • Just figured this out. For whatever reason, while the async method is away doing its thing the custom validation property (in my case 'unique') gets set to false for a split second. I also noticed during this split second that $pending also gets set to true before going back to false. So - by combing both in your if statement you should be able to prevent your error message popping up for that split second. something like:

    v-if="!$v.email.unique && !$v.email.$pending"