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?

Answer 1

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