CODEWITHSUNDEEP
vue.jsrules
ketata ayman
ketata ayman

Reputation: 11

How to set password confirmation rule in vuetify text-fields

<v-text-field ref="password" append-icon="lock" v-model="password" label="Password"type="password":rules="PasswordRules" :error-messages="errorMessages" required >
</v-text-field> 
<v-text-field ref="password2" append-icon="lock" label="Confirm Password" v-model="password2" type="password" :rules="PasswordRules2" :error-messages="errorMessages" required >
</v-text-field>

PasswordRules: [ v => !!v || "Password is required", v => (v && v.length >= 8) || "password must be valid" ], PasswordRules2: [ v => !!v || "Password incorrect", v => v===this.password || "Password is not identical" ], password2 must be indentic to password

Upvotes: 1

Views: 1183

Answers (1)

D Malan
D Malan

Reputation: 11434

If you have a validation rule that compares two values in the data object you need to use a function in either the methods or computed objects because you won't have access to other data properties from within a closure in the data object.

You can create a method like this:

methods: {
    validatePassword2(value) {
      return value == this.password || "Password is not identical. password2 must be indentical to password."
    },
}

Set your PasswordRules2 to:

PasswordRules2: [ v => !!v || "Password incorrect" ],

And then use your method as a rule like this:

<v-text-field 
  ref="password2" 
  :rules="PasswordRules2.concat(validatePassword2)"
  ...your other properties here...
>

You can check out this Codepen I created to show that it works.

Upvotes: 2

Related Questions