Vee-validate: confirmed rule not working

[mhbsilva]

Versions

• vee-validate: v2.1.0-beta.1
• vue: 2.5.2

Describe the bug
I have created a component that, validation roles are defined as properties.
When the first field is same as second one, the validation result is incorrect in confirmed rule.

Solution
Downgraded my vee-validate: v2.0.0,

[logaretm]

target based rules only use refs in 2.1 and onwards so you need to make sure your components are properly refed and no longer use the $ prefix in the rule target name.

If you can provide a demo that would be easier for me to debug.

[andrehsmendes]

@logaretm

i have similar problem when using "confirmed"

`input v-model="profile.password.new" v-validate="'required'" name="new_password" class="uk-input" id="newPass" type="password" :class="{'uk-form-danger': errors.has('passChange.new_password') }"

input v-model="profile.password.newAgain" v-validate="'required|confirmed:new_password'" name="password_again" class="uk-input" id="newPassAgain" type="password" :class="{'uk-form-danger': errors.has('passChange.password_again') }"`

Validation will not pass even if it is correct.

[logaretm]

@andrehsmendes Please check my latest comment on the issue, your fields do not have the ref which is mandatory as of 2.0.9 to make target dependent rules work.

this should work

input v-model="profile.password.new" v-validate="'required'" ref="passwordRef" name="new_password" class="uk-input" id="newPass" type="password" :class="{'uk-form-danger': errors.has('passChange.new_password') }"

input v-model="profile.password.newAgain" v-validate="'required|confirmed:passwordRef'" name="password_again" class="uk-input" id="newPassAgain" type="password" :class="{'uk-form-danger': errors.has('passChange.password_again') }"

https://baianat.github.io/vee-validate/guide/custom-rules.html#target-dependant-rules

[andrehsmendes]

@logaretm

thank you 👍

[PrimozRome]

@logaretm I am having the same problem with confirmed not working and I have ref on my fields.

    <input 
      v-validate="validation"
      :ref="password"

    <input 
      v-validate="validation"
      :ref="passwordConfirm"

Validation rules for passwordConfirm input

    {
      confirmed: 'password'
    }

What am I missing here?

UPDATE

Is it maybe because I have a custom wrapper component around both input fields. I have a custom TextInput component which then renders above inputs. Ref is added on the input like seen above inside the TextInput component. This means that passwordConfirm does not see password field directly...

[logaretm]

@PrimozRome For cross-validation to work, the directive needs to be in the same component tree level as the target field. Meaning using v-validate inside a TextInput component may not work.

This article touches on this issue.

Alternatively, I recommend trying out the Validation Components, they fix a lot of the issues in the directive API.