Vuetify custom validation for confirm password

vuetify validation
vee-validate confirm password
vuetify login form validation
vuetify rules examples
vuetify password strength
vuetify form server side validation
vuetify phone number validation
vuetify password match rules

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 ??

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.

How to add password matching validation in vuetify?, Very simply using Vee-validate: You can define custom rules: 'text' : ' password'" name="input-10-1" label="Re-enter Password" hint="At� Open up the App.vue file. Delete everything inside the v-app-bar. Add a title to the the app bar that just says Vuetify Form Validation. It should look like this: Vuetify Form Validation. Next delete everything inside the v-content area. We are going to add vuetify’s tab component. We will eventually have a tab for each form we create.

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.',
      ],
    }
},

Cannot use the "confirmed" rule with Vuetify text-field � Issue #735 , Versions: VueJs: 2.3.3 Vee-Validate: 2.0.0-rc.13 Description: When I use the When using custom components with confirmed or after or any field So I added a ref attribute on the password input and added $ prefix in the� Note: We use the pattern attribute (with a regular expression) inside the password field to set a restriction for submitting the form: it must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter.

template

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

script

data() {
  return {
    password: "",
    confirmPassword: "",
    validPassword: "",
    rules: {
      passwordRules: v => !!v || "Password is required",
      confirmPasswordRules: v => !!v || "Password is required"
    }
  };
},
methods: {
  checkPassword(invalid) { 
    // correct: false
    if (true == invalid) {
      this.validPassword = false;
    } else {
      this.validPassword = true;
    }
   },
 }

text-field provides an "update:error" event. If the password is valid, it executes a function of that event and returns false. Returns true to a function when it is changed from a valid password to an invalid password.

Vuetify Example Pen, <v-form v-model="form.valid" @submit.prevent="(validate() && submit())" lazy- validation>. 4 :error-messages="errors.collect(password.confirm.props.name)"/ >. Package content. Simple, lightweight model-based validation for Vue.js. You can read the introduction post for more insight on how this solution differs from other validation libraries.

Password Confirmation Validation With Vue and Vee-Validate , Check out the CodePen below for a working demo of the password confirmation validator. Vee-Validate Password Confirmation Example. HTML; CSS; JS. Result. When it comes to form validation, Vuetify has a multitude of integrations and baked in functionality. Want to use a 3rd party validation plugin? Out of the box you can use Vee-validate and vuelidate .

Form component — Vuetify.js, The internal v-form component makes it easy to add validation to form inputs. All input Rules allow you to apply custom validation on all form components. For example, if the field under validation is password, a matching password_confirmation field must be present in the input. date. The field under validation must be a valid, non-relative date according to the strtotime PHP function. date_equals:date. The field under validation must be equal to the given date.

Form Validation with Vuetify in a Vue App | by Jennifer Bland, validations. I will show you how to create client-side form validation using Vuetify. In your terminal enter this command to start your application: npm run Our form will have two fields for email and password. Here is the� Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.

Comments
  • So how can I achieve what I want ?? if Rules should return a string or boolean, received 'function' instead. As per your answer, I just validate with the required field but I need to confirm password as well as required field.
  • I'm sorry I made a mistake. I mistook the computed attribute for methods. I updated my article.
  • I don`t want to check valid or invalid passwords I just want to compare both passwords to make signup but your code is not compared passwords anywhere.