Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify custom validation for confirm password

I am working on Vue.js template and on the sign up page, I need to compare password while user signup so, I added custom validation rule like the following code:

<v-text-field 
    label="Password" 
    v-model="password" 
    :rules="passwordRules" 
    type="password" 
    required
></v-text-field>
<v-text-field 
    label="Confirm Password" 
    v-model="confirmPassword" 
    :rules="[confirmPasswordRules,passwordConfirmationRule]"
    type="password" 
    required
></v-text-field>

script:

data() {
    return {
        password: "",
        confirmPassword: "",
        passwordRules: [v => !!v || "Password is required"],
        confirmPasswordRules: [v => !!v || "Password is required"],
    };
},

Compare password method in computed:

computed: {
    passwordConfirmationRule() {
        return () => (this.password === this.confirmPassword) || 'Password must match'
    },
}

I use the computed method for confirm password its working fine and compare the password perfectly but it shows error in console [Vuetify] Rules should return a string or boolean, received 'object' instead so how can I solve this ??

like image 583
Varinder Sohal Avatar asked Sep 27 '19 08:09

Varinder Sohal


People also ask

How do I add validation to Vuetify?

To add Vuetify, navigate to the project folder cd vuetify-form-validation. When the Vuetify command starts running, it'll again ask to select which preset you want. Select the default preset.

What is lazy validation in Vuetify?

form.lazy-validation. From the Vuetify form API docs: If enabled, value will always be true unless there are visible validation errors. You can still call validate() to manually trigger validation. Here, value is used to represent whether the form is currently valid.


2 Answers

You're getting the error message because the rules property of the "Confirm Password" input doesn't contain a one-dimensional array containing the rules, but instead contains confirmPasswordRules which is an array itself plus the passwordConfirmationRule rule.

So essentially this

:rules="[confirmPasswordRules, passwordConfirmationRule]"

contains this:

:rules="[[v => !!v || "Password is required"], (this.password === this.confirmPassword) || 'Password must match']"

You want all of the rules to be contained in a single array instead. You can use the concat method to add the passwordConfirmationRule to the confirmPasswordRules array like this:

:rules="confirmPasswordRules.concat(passwordConfirmationRule)" 

I've created a Codepen to show that this works here.

like image 54
D Malan Avatar answered Sep 18 '22 08:09

D Malan


you can use

template :

<v-text-field
  v-model="password"
  label="Password"
  name="password"
  prepend-icon="mdi-lock"
  type="password"
  :rules="passwordRules"
/>

<v-text-field
  v-model="confirmPassword"
  label="Confirm Password"
  name="confirmPassword"
  prepend-icon="mdi-lock"
  type="password"
  :rules="confirmPasswordRules"
/>

script:

data() {
    return {
      password: '',
      confirmPassword: '',
      passwordRules: [
        (value) => !!value || 'Please type password.',
        (value) => (value && value.length >= 6) || 'minimum 6 characters',
      ],
      confirmPasswordRules: [
        (value) => !!value || 'type confirm password',
        (value) =>
          value === this.password || 'The password confirmation does not match.',
      ],
    }
},
like image 37
Mahdad Avatar answered Sep 18 '22 08:09

Mahdad