How to add password matching validation in vuetify?
You can define custom rules:
computed: { passwordConfirmationRule() { return () => (this.password === this.rePassword) || 'Password must match' }}
and use it
<v-flex xs12 sm6> <v-text-field v-model="rePassword" :append-icon="show1 ? 'visibility' : 'visibility_off'" :rules="[rules.required, rules.min, passwordConfirmationRule]" :type="show1 ? 'text' : 'password'" name="input-10-1" label="Re-enter Password" hint="At least 8 characters" counter @click:append="show1 = !show1" /> </v-flex>
very easiest way isusing v-model (password and confirm_password), no need to use computation
Rule
:rules="[v => !!v || 'field is required']"
Or
:rules="[(password!="") || 'field is required']"
in password
<v-text-field label="Password*" v-model="password" type="password" required :rules="[v => !!v || 'field is required']"></v-text-field>
confirm password fieldRule
:rules="[(password === confirm_password) || 'Password must match']"
code:
<v-text-field label="Confirm Password*" v-model="confirm_password" type="password" required :rules="[(password === confirm_password) || 'Password must match']"></v-text-field>
VeeValidate is great for form validation but in my opinion is overkill for resolving this question when it can be achieved in Vuetify alone.
Following on from @ittus answer, you need to remove the arrow function in passwordConfirmationRule
to access this:
return this.password === this.rePassword || "Password must match";
See this codesandbox working example (also now using Vuetify 2.x)