Vue js vee validate password confirmation always false

Question

I'm trying to use vee validate to verify the password using this code.

<div>
    <input type="password"
           placeholder="Password"
           v-model="password"
           v-validate="'required|min:6|max:35|confirmed'"
           name="password" />
</div>
<div>
    <span>{{ errors.first('password') }}</span>
</div>
<div>
    <input type="password"
           placeholder="Confirm password"
           v-model="confirmPassword"
           v-validate="'required|target:password'"
           name="confirm_password" />
</div>
<div>
    <span>{{ errors.first('confirm_password') }}</span>
</div>

But it always says The password confirmation does not match. What went wrong in my code?

Bennett Dams · Accepted Answer · 2019-06-10 14:07:41Z

53

Your password input must have ref="password" - that's how vee-validate finds the target:

<input v-validate="'required'" ... ref="password"> (Thanks, Ryley).

confirmed:{target} - Input must have the same value as the target input, specified by {target} as the target field’s name.

Also, there's an error with your Vee Validate syntax, change target: to confirmed:

v-validate="'required|target:password'"

should be

v-validate="'required|confirmed:password'"

Have a look at the basic example below, it will check for two things:

Does the second input field have any input value?
If yes, does the second input value match the first input value?

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

body {
  background: #20262E;
  padding: 15px;
  font-family: Helvetica;
}

#app {
  width: 60%;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  margin: auto;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.js"></script>
<script>
  Vue.use(VeeValidate);
</script>


<div id="app">

  <form id="demo">

    <!-- INPUTS -->
    <div class="input-group">
      <h4 id="header"> Enter Password</h4>

      <div class="input-fields">
        <input v-validate="'required'" name="password" type="password" placeholder="Password" ref="password">

        <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" placeholder="Password, Again" data-vv-as="password">
      </div>
    </div>

    <!-- ERRORS -->
    <div class="alert alert-danger" v-show="errors.any()">
      <div v-if="errors.has('password')">
        {{ errors.first('password') }}
      </div>
      <div v-if="errors.has('password_confirmation')">
        {{ errors.first('password_confirmation') }}
      </div>
    </div>

  </form>
</div>

Further reading: https://baianat.github.io/vee-validate/guide/rules.html#confirmed

edited Jun 10, 2019 at 14:07

answered Jul 10, 2018 at 13:02

Bennett Dams

7,1836 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ryley Over a year ago

Also, your password input must have ref="password" as that's how vee-validate finds the "target"

Bennett Dams Over a year ago

@Ryley Updated my answer.

margherita pizza Over a year ago

Thanks a lot. very helpful answer . =)

atilkan Over a year ago

v-validate can find target from name

Rohit Gupta Over a year ago

@BennettDams thanks a lot. This helped me. could you please bold the ref thing please, that was really crucial in my case. Special thanks to ryley guy - u my man!.

|

sailfish009 · Accepted Answer · 2020-04-11 05:40:11Z

7

Below code works for me: https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields

<template>
  <ValidationObserver>
    <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
      <input type="password" v-model="password" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>

    <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
      <input type="password" v-model="confirmation" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </ValidationObserver>
</template>

<script>
import { extend } from 'vee-validate';

extend('password', {
  params: ['target'],
  validate(value, { target }) {
    return value === target;
  },
  message: 'Password confirmation does not match'
});

export default {
  data: () => ({
    password: '',
    confirmation: ''
  })
};
</script>

answered Apr 11, 2020 at 5:40

sailfish009

2,9651 gold badge30 silver badges37 bronze badges

1 Comment

raza9798 Over a year ago

This works Thank your for more information https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields

jogarcia · Accepted Answer · 2022-08-24 21:19:57Z

On Vee-validate 3.x.x another way of doing it is:

<template>
  <ValidationObserver>
    <ValidationProvider vid="password" rules="required" v-slot="{ errors }">
      <input type="password" v-model="password" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>

    <ValidationProvider name="confirm" rules="required|confirmed:password" v-slot="{ errors }">
      <input type="password" v-model="confirmation" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </ValidationObserver>
</template>

<script>
import { extend } from 'vee-validate';

extend("confirmed", {
  ...confirmed,
  message: "The password does not match",
});

export default {
  data: () => ({
    password: '',
    confirmation: ''
  })
};
</script>

Something import to notice is the vid prop on the first validation provider. It will NOT work without it.

Collectives™ on Stack Overflow

Vue js vee validate password confirmation always false

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related