Vee-validate: Confirmed rule invalidates password confirmation when user hasn't interacted with it yet

[sts-ryan-holton]

Versions

• vee-validate: 3.3.9
• vue: 2.6.11

Describe the bug

When using the confirmed:confirmation rule for password confirmation, initial password input is invalid before user even types in their password confirmation.

To reproduce

Attached is some code example for my inputs. I've got a password and password confirmation input (I've tried to re-order them in the hope that the password field wouldn't become invalid before entering a password):

<b-card>
  <validation-observer v-slot="{ handleSubmit }">
    <b-form @submit.stop.prevent="handleSubmit(createAccount)">
      <validation-observer :key="1">
        <ValidationProvider
          name="Password"
          rules="required|min:8|confirmed:confirmation"
          v-slot="{ errors, classes }"
        >
          <b-form-group id="password-input-group" label="Your Password" label-for="password">
            <b-form-input
              id="password"
              v-model="account.password_confirmation"
              type="password"
              placeholder="Choose a strong password"
              :class="classes"
              aria-describedby="password-live-feedback"
              size="lg"
            ></b-form-input>
            <b-form-invalid-feedback id="password-live-feedback">
              {{ errors[0] }}
            </b-form-invalid-feedback>
          </b-form-group>
        </ValidationProvider>
        <ValidationProvider
          name="Confirm Password"
          rules="required"
          vid="confirmation"
          v-slot="{ errors, classes }"
        >
          <b-form-group id="password-input-group" label="Confirm Your Password" label-for="password-confirm">
            <b-form-input
              id="password-confirm"
              v-model="account.password"
              type="password"
              placeholder="Confirm your password"
              :class="classes"
              aria-describedby="password-confirm-live-feedback"
              size="lg"
            ></b-form-input>
            <b-form-invalid-feedback id="password-confirm-live-feedback">
              {{ errors[0] }}
            </b-form-invalid-feedback>
          </b-form-group>
        </ValidationProvider>
      </validation-observer>

    </b-form>
  </validation-observer>
</b-card>

Expected behavior
The password confirmation input shouldn't become invalid until the user has actually typed their password. E.g, right now if I type out a password and change to the following input, it'll say that my password is wrong on account creation even though I haven't filled out the confirmation, this isn't typical of an account registration process.

Desktop (please complete the following information):

• OS: Windows
• Browser chrome
• Version latest

Additional context

The inputs attached is part of an account creation form but the majority of the form isn't needed for this issue, I shall attach my Vee Validate config as well:

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, extend, configure } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'

const config = {
  mode: 'lazy',
  classes: {
    valid: '',
    invalid: 'is-invalid'
  }
}

configure(config)

Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule])
})

// Register it globally
Vue.component("validation-observer", ValidationObserver)
Vue.component('ValidationProvider', ValidationProvider)

[sts-ryan-holton]

Any update on this?

[logaretm]

Sorry, it took a while to address this, do you mind setting up an example with this on codesandbox?

[sts-ryan-holton]

@logaretm Sure, better still... here's the whole webpage -> https://domain-monitor.io/account/create

[KuenzelIT]

I have a similar problem validating a custom file component. The valid and invalid attributes of the validation observer are both false. Is (or should) that even be possible? I just wanted to confirm that before creating a rather complex reproduction example.

Edit: I'm using v2.2.15 though since I didn't have time yet to look at an upgrade.

[logaretm]

@sts-ryan-holton A minimal example would better to isolate the issue. It might not be related to vee-validate. So please, use codesandbox and create a minimal example that reproduces this issue. You can fork any of the examples in the docs.

@KuenzelIT v2 is not maintained anymore, for almost 2 years now I think. So unfortunately if its an issue it won't be fixed on v2 branch.

[KuenzelIT]

@KuenzelIT v2 is not maintained anymore, for almost 2 years now I think. So unfortunately if its an issue it won't be fixed on v2 branch.

Alright, thanks for the quick response!

[sts-ryan-holton]

As mentioned in my description, I have the exact code copy from the website mentioned above, this is essentially the same as a Code Sandbox since it's a live URL containing the same code.

[logaretm]

Right, except I cannot clone it locally and debug the template nor run local tests against it. Codesandbox is great and saves me a lot of time isolating the issue.

Closing until a reproduction link is provided.

[sts-ryan-holton]

@logaretm This still is an issue, in terms of a reproduction link, just take a look at the confirmed rule on the Vee Validate docs itself: https://logaretm.github.io/vee-validate/guide/rules.html#rules and https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields

1. type something into the first input
2. error appears before even typing anything in the next input

Putting this in context, typically with most registration systems that have a password confirmation input, the first password input will not attempt to invalidate until the following has been interacted with because it's bad for the UI, the customer is filling out a form, they create a password - and are greeted with (for instance) "The {field} field confirmation does not match", well that's because the user hasn't confirmed their password yet.

Thus a confirmed rule.