Vee-validate cannot validate match password

Question

I am trying to validate a match password without any success ... Am I wrong ? The email and password validation are OK but not the match_password

using VeeValidate

HTML

<div id="app">
  <v-app id="inspire">
    <v-container mt-1 grid-list-xl">
      <v-layout row wrap justify-space-around>
        <v-flex d-flex sm6 md6>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card class="flexcard" dark tile flat>
                <v-card-title class="card__title justify-center">PROFILE</v-card-title>
                <form @submit.prevent="onSubmit()">
                 <v-card-text class="card__text grow">

                  <v-text-field 
                      label="Email" 
                      v-model="email" 
                      data-vv-name="email" 
                      v-validate="'required|email'" 
                      :error-messages="errors.collect('email')" 
                      prepend-icon="email"
                  ></v-text-field>

                  <v-text-field 
                      type="password" 
                      v-model="password" 
                      label="Password" 
                      v-validate="'required|min:6'"  
                      data-vv-name="password" 
                      :error-messages="errors.collect('password')" 
                      prepend-icon="lock"
                  ></v-text-field>  

                  <v-text-field 
                      type="password" 
                      v-model="match_password" 
                      label="Match Password" 
                      v-validate="'required|confirmed:password'" 
                      :error-messages="errors.collect('match_password')"
                      data-vv-as="password"
                      data-vv-name="match_password" 
                      prepend-icon="lock"
                   ></v-text-field>

                </v-card-text>
                <v-card-actions>
                <v-btn round  type="submit">SUBMIT</v-btn>
                </v-card-action>
                </form>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
     </v-layout>
      </v-container>
  </v-app>
</div>

Script

Vue.use(VeeValidate, {
  errorBagName: 'errors'
})

new Vue({
  el: '#app',
  $_veeValidate: { validator: 'new' },
  data: () => ({
    email: '',
    password: '',
    match_password: ''
  }),
  computed: {
  },
  methods: {
    onSubmit () {
     console.log('SUBMIT')
    },
    cancel () {
    }
  }
})

Possible duplicate of [Vue js vee validate password confirmation always false](https://stackoverflow.com/questions/51265450/vue-js-vee-validate-password-confirmation-always-false) — Ryley, Jul 23 '18 at 12:51
following link will solve the issue`https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields` — Mohamed Raza, Jan 19 '21 at 14:36

score 2 · Answer 1 · answered Jul 23 '18 at 09:57

Found answer in Vue js vee validate password confirmation always false

the tarfet 'password' must have ref="password"

here is the updated html code

<div id="app">
  <v-app id="inspire">
    <v-container mt-1 grid-list-xl">
      <v-layout row wrap justify-space-around>
        <v-flex d-flex sm6 md6>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card class="flexcard" dark tile flat>
                <v-card-title class="card__title justify-center">PROFILE</v-card-title>
                <form @submit.prevent="onSubmit()">
                <v-card-text class="card__text grow">
                  <v-text-field label="Email" v-model="email" data-vv-name="email" 
                     v-validate="'required|email'" :error-messages="errors.collect('email')" prepend-icon="email"></v-text-field>
                 <v-text-field type="password" v-model="password" label="Password" v-validate="'required|min:6'"  data-vv-name="password" :error-messages="errors.collect('password')" ref="password" prepend-icon="lock"></v-text-field>
                 <v-text-field type="password" v-model="match_password" label="Match Password" v-validate="'required|confirmed:password'" :error-messages="errors.collect('match_password')"data-vv-as="password"data-vv-name="match_password" prepend-icon="lock"></v-text-field>
                </v-card-text>
                <v-card-actions>
                <v-btn round  type="submit">SUBMIT</v-btn>
                </v-card-action>
                </form>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
     </v-layout>
      </v-container>
  </v-app>

Vee-validate cannot validate match password

1 Answers1