Vee-validate: Confirmed validation rule doesn't appear to follow scope

[jeffory]

Versions:

• VueJs: 2.2.0
• Vee-Validate: 2.0.0-beta.25

Description:

Confirmation rules do not appear to be contained to any scope.

I have two sets of password fields on the same page (within modals) and but when confirming passwords the first field on the page is anyways targeted. Looking through vee-validate's code it does not appear to use a scope either (it targets what I assume is the global document directly).

Example:
https://jsfiddle.net/jeffory/9dr7c2qt/1/

I have written a rough rule that is working but don't want to use it unless completely necessary.

Could someone please confirm if there is any way yet to enforce a scope when validation rules target another field?

Thank-you.

[logaretm]

Target field currently cannot be limited by a scope, therefore you might want to prefix the input names in someway. I can improve it by allowing the target value to be a selector which should give you more control over which inputs are matched.

[jeffory]

Thanks for the confirmation. I have written up a helper function if it helps:

function _findFieldInDOM (query) {
    // A dot indicates a scope, unless escaped with a backslash
    if (fieldBreakdown = query.match(/^([^\.\\]+)\.(.*)$/)) {
        var scope = fieldBreakdown[1];
        var fieldName = fieldBreakdown[2];
    } else {
        var scope = '__global__';
        var fieldName = query;
    }

    // Unescape any dots
    fieldName = fieldName.replace("\\.", ".");

    if (scope == '__global__') {
        var field = document.querySelector("input[name='" + fieldName + "']");
    } else {
        var field = document.querySelector("[data-vv-scope='" +  scope + "'] input[name='" + fieldName + "']");

        if (!field) {
            // Scope may be set on an input directly
            var field = document.querySelector("input[name='" + fieldName + "'][data-vv-scope='" +  scope + "']");
        }
    }

    return field;
};

It allows you to find a field via a query like 'scope.fieldname'.

Not sure if this suits the project though as I saw in other issues people using dots in their input names. Although they may be escaped with a backslash if need be.

[farazshuja]

I think the simplest solution is to create a custom rule like

validator.extend('confirmation', {
      getMessage: field => field + ' does not match',
      validate: function (value, args) {
        const field = document.querySelector(`${args[0]}`)
        return !!(field && String(value) === field.value)
      }
    })

which you can use like'confirmation': '#field-name'

[logaretm]

I think I will merge both your suggestions @farazshuja @jeffory to allow the user to specify a selector or a ref target to make it a little bit handier when targeting other inputs.

[farazshuja]

Just found that extended rule 'confirmation' does not work if I edit the input#field-name after filling the confirmation input, any way to force validation on change of input#field-name?

[logaretm]

@farazshuja Currently there is no built in way to do it. You can force validate it with the API method validate.

[Mat-thieu]

Thank you @farazshuja

Unfortunately this plugin is full with these little exceptions/bugs, it took me a long time to make a single page login/registration form (scoping problems, v-if not working on scope, not being able to reset validations at all, missing useful validation rules and now this).

I appreciate that the plugin exists and the loads of time and dedication to keep it up to date but for simply being a validation plugin there's a lot to know before you can make something that works as expected without having to dig through github issues and a terribly janky and unclear documentation.