Vue js vee validate password confirmation always false Vue js vee validate password confirmation always false vue.js vue.js

Vue js vee validate password confirmation always false


validation vue.js vuejs2 vee-validate

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/vue@2.5.17/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>
Expand snippet