Vee-validate: confirmed rule not working on child input components

[dominic-horbas]

Versions:

• VueJs: vue-2.5.9
• Vee-Validate: 2.0.0-rc.26

Description:

Hi, I'm having a hard time with the confirmed rule. `Here is an example that works:

<input type="text" name="password3" v-validate="'required'" />
<input type="text" name="password4" v-validate="'confirmed:password3'" />

But I'm trying to make a custom component for my input. I pass the v-validate parameters to the child component

    <input
      @input="handleInput"
      :type="type"
      :value="currentValue"
      class="form-control"
      :class="{ 'is-invalid': errors.has(this.name) }"
      :name="name"
      :id="name"
      :placeholder="placeholder"
      v-validate="{ rules: validation, arg: currentValue }"
      />

In the parent component:

<form-input  name="password1" type="password" v-model="password1" validation="required|min:6" />
<form-input name="password2" type="password" v-model="password2" validation="required|min:6|confirmed:password1" />

It seems that every validation is working besides required, which always returns an error. Am I doing something wrong?

Thank you

[logaretm]

The issue is that the confirmed rule takes a selector, which varies depending on the other field. Here is a full description of the selectors:

confirmed:$pass tries to resolve a field that is registered in $refs of the context component.
confirmed:#pass Tries to resolve a field which its id is pass.
confirmed:.pass tries to resolve a field which has a pass class.
confirmed:pass Tries to resolve a field which its name is pass.

Note that selectors will only look inside the context vm template, and will not expand to the entire DOM nor the parent components, so make sure to keep your related inputs within the same component. Here is an example for custom components.

I'm aware the docs only mention the name selector, I will address that shortly.

[Nathaniel-Rink]

Thank you. this question was a lifesaver