Vee-validate: Confirmed rule does not work when injecting in custom components

[pendar747]

Versions:

• VueJs: 2.3.3
• Vee-Validate: 2.0.0-rc.14

Description:

When I inject vee-validate in a custom component, the confirmed validation rule fails to resolve value of the other property to check against. It seems to compare the value of the input against a string!

Steps To Reproduce:

Try the following JS fiddle: https://jsfiddle.net/64ote675/5/

[pendar747]

One way I've managed to make that work is by using the data-vv-value-path="dValue" data-vv-name="password" ref='password' v-validate="'required'" on my custom component, which I think defeats the whole point of having a component since you are adding a lot of complexity in your parent component. (JS fiddle: https://jsfiddle.net/005qva31/)

It would be much better if having v-validate inside the component worked with another custom component.

[logaretm]

Currently the plugin requires value-path to resolve these values, because if you think about it how can the plugin tell? in your component itsdValue in other project it could be innerValue like vue-multiselect. and so on, and we can't force a specific property name because of 3rd party integrations.

I'm planning on a new feature that should reduce the amount of attributes in templates #707

Its currently a work in progress, might get released with the next version if I manage it. thanks for sharing your feedback though, it makes it clearer that such feature is needed.

[pendar747]

Thanks for the quick reply. Nevertheless I managed to make this work by passing :rules="'required|confirmed:'+password" to my component instead. I noticed that the validator uses the string literal found in the validation rule when it can't resolve it to an actual value. I haven't seen this behaviour documented anywhere though. I think if we keep this behaviour would be pretty useful in binding parent properties to the custom components.

Here's my JS fiddle again updated with this fix: https://jsfiddle.net/crjkprd2/

[logaretm]

Because that isn't the intended behavior, well when the validator cannot resolve the target field it just passes the rule params as the value for the confirm rule as a fallback. It would work in your case but that is just a side effect of not being setup correctly.

The correct way to do it is in your first reply tho.

[pendar747]

The side effect actually makes sense to me! Since we are dynamically binding the value to confirm with in the validation rule. Having the parent component supply the compared value is a lot more intuitive and a better data flow than the child component looking for that value.

Also I'm wondering why in my original setup, the validator couldn't find the target value by looking up an element with that name attribute.

[robertorp]

What if create a tag that defines a context?

<validate> <component name = "c1" /> <component name = "c2" /> </ validate>

Everything inside is a unique context

[johman10]

@logaretm #707 is released with rc-19, any chance you can give us an example on how this could fix the problem of this issue?

[logaretm]

@johman10 I have updated the example, sorry about the long response time:

https://jsfiddle.net/logaretm/n4xcemuL/2/

EDIT: Closing since a new way to handle this was introduced in the above example.

[johman10]

@logaretm I think this isn't working entirely as expected. I updated the JSFiddle to be closer to our situation: https://jsfiddle.net/n4xcemuL/3/

Notice that we have custom events on the config. This causes it not to validate on blur of the confirmed field, but does validate if you blur on the first field. Even the validate button doesn't work until there was a focus on the first field. I would say this is unexpected behaviour.

[logaretm]

You need to have a ref on the target component, and prefix the confirmed target name with $ to let it know that it should look up the refs for the confirmed target.

Now your component does not emit the blur event at all, so it wouldn't validate by user interaction.

https://jsfiddle.net/logaretm/n4xcemuL/4/

[DJ-Icebear]

Can't get this to work either

[timfjord]

To make the above example work with vee validate 2.1.* confirmed:$password should be replaced with confirmed:password https://jsfiddle.net/timsly/jvok4e5L/2/