Vuelidate: Vuelidate doesn't validate the field with vue-masked-input

[araujoyuri]

I'm using vue-masked-input to apply a credit card mask on my input, but the required validation from Vuelidate is not being called.

<div class="field">
      <p class="cardFlags"><img src="../../assets/cardFlags-v2.png"></p>
      <p class="control">
        <input type="hidden" name="" id="accountId" :value="currentCheckout.master_iugu_account_id">
        <masked-input class="input is-large"
                      :class="{invalid: $v.number.$error}"
                      id="number"
                      data-iugu="number"
                      v-model="number"
                      mask="1111-1111-1111-1111"
                      @blur="$v.number.$touch()"
                      placeholder="Número no cartão" />
        <small class="error" v-if="$v.number.$error">Campo obrigatório</small>
      </p>
    </div>

This is my code, if there's any documentation about it or another way of doing it, I'm open to try.

PS.: I'm using the same validation for the name field and is working perfectly.

[jean-moldovan]

Does the blur event gets triggered correctly?

[araujoyuri]

@jean-moldovan Yes, it does. When I print the $v object, all of the fields are displayed and I can see the $error getting true and false as I meet the requirements for the validation.

[alisabrigok]

I'm using vue-the-mask package and I faced with the same issue but after some investigation I've found this:

https://github.com/vuejs-tips/vue-the-mask/issues/55

Basically, the blur event doesn't trigger as is. Subscribing to it using @blur.native makes it properly work.

I know the package you use is different but that did the job for me, hope it works for you too @araujoyuri .