VeeValidate Confirmed Rule Fails With Custom Validator

Question

Using Vee-Validate, when using a custom validator along with the confirmed rule, the confirmed rule always fails validation. The custom validator is specified on the input field being confirmed like so:

 <input type="password" placeholder="Password" data-vv-as="password" v-model="password" name="password" v-validate="'required|min:8|has_upper'" />
<input type="password" placeholder="Password" data-vv-as="confirm" v-model="confirmPassword" name="confirmPassword" v-validate="'required|confirmed:password'" />

Here is my Vue instance:

 (function (Vue, VeeValidate) {

        VeeValidate.Validator.extend('has_upper', {
            getMessage: function (field) {
                return 'The ' + field + ' must contain an upper case letter';
            },
            validate: function (value) {
                return /^(?=.*[A-Z]).+$/.test(value);

            }
        });
     Vue.use(VeeValidate);
        var enroll = {
            el: "#app",
            data: {
                password:'',
                confirmPassword: ''
            }

        }

        var app = new Vue(enroll);

    })(Vue, VeeValidate)

The custom validator for the password field is triggering as expected, however, as mentioned the confirmed rule is always failing for the confirm password model.

I have also had a lot of trouble with confirmed validation in vee-validate. This might sound stupid but does it fail if both passwords match or does it fail right off the bat before you enter the password for the second time? — Taylor
As long as I do not have a custom validator rule applied to either password or confirmPassword controls everything works. It fails right off the bat when I add the custom validator. — Mike Lunn

Ryley Ryley · Accepted Answer · 2018-06-29T15:42:49

Recently in Vee-Validate (2.1.0 and greater), they've changed how parameters work for these. Now, the target of confirmed has to be a ref, so this will work:

<input type="password" ref="password" name="password" v-validate="'required'" />
<input type="password" v-model="confirmPassword" name="confirmPassword" v-validate="'confirmed:password'" />

The only change you really need to make is to add ref="password" to your password input.

See here for the author talking about this change: https://github.com/baianat/vee-validate/issues/1415

So far I don't see any changes in the documentation, but I assume it will come.

Working example: https://codesandbox.io/s/km4lw12823

VeeValidate Confirmed Rule Fails With Custom Validator

1 Answers