Vee-validate: Doesn't work with components

[fyodorvi]

Versions:

• VueJs: 2.3.4
• Vee-Validate: 2.0.0-rc.5

Description:

Vee-validate doesn't seem to work with custom components, e.g. input mask fields.
Tried these:
https://github.com/text-mask/text-mask
https://github.com/vuejs-tips/vue-the-mask

Steps To Reproduce:

<the-mask v-validate="'required'" name="cardnumber" v-model="cardNumber" :mask="['#### #### #### ####']"></the-mask>

<masked-input v-validate="'required'" name="cardnumber" v-model="cardNumber" :mask="['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]"></masked-input>

In both cases the error is:

Error in mounted hook: "[vee-validate]: Cannot add a listener for non-existent field undefined."

Both of components just wrap input field.

Works fine with https://github.com/probil/v-mask since it's a directive.

[afuno]

The input tag must have a name attribute.

Example:

<input type="text" name="title" v-model="post.title" v-validate="'required|min:5|max:200'">

And the error says this: undefined. That is, the field was not found. Have you tried to make the same values in name and v-model attributes?

[logaretm]

Since it is a component, you can try to use data-vv-name instead and check if that works for you, there might be issues with name detection with that component in particular.

[fyodorvi]

@logaretm thanks a lot, it worked with the-mask, didn't try with other one.

[marcusrall]

@fyodorvi How did you do it?

[gmdimitriz]

@fyodorvi How did you do it? [2]

[brunofront]

@fyodorvi How did you do it? [3]

[ivolkoff]

@marcusrall, @gmdimitriz, @brunob182
i use this code, work fine

<the-mask type="text"
                    name="sms_code"
                    id="login-key"
                    class="panel__form__field"
                    autocomplete="off"
                    :mask="'####'"
                    :value="form.data.sms_code"
                    @input="onChange('sms_code', arguments[0])"
                    v-validate="'required|min:4|max:4'"/>

[hardikyjoshi]

Hello @fyodorvi @afuno @logaretm @marcusrall @gmdimitriz !
I tried to create a fiddle https://codepen.io/hardikj/pen/LrGVvq used data-vv-name but still couldn't get it working. Could you please check and let me know what I'm missing. The email field works, but the name field doesn't...

Thanks,
Hardik