Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set validate rules in vuelidate to have value same as a field of an object?

Let say I have a vue component with data like this:

  data: () => ({
    form: {
      old_password: {
        data: '',
        type: 'password',
        label: 'Old Password',
      },
      new_password: {
        data: '',
        type: 'password',
        label: 'New Password',
      },
      repeat_password: {
        data: '',
        type: 'password',
        label: 'New Password Confirmation',
      },
    },
  }),

The data is formatted in this way as I am using another plug-in, ant-design, to build the form, and therefore formatting the data in another way is not an option. The data field will be storing the actual data.

Then, I have the following validation rules set for vuelidate.

  validations: {
    form: {
      old_password: {
        data: { required },
      },
      new_password: {
        data: { required },
      },
      repeat_password: {
        data: { sameAsPassword: sameAs('new_password') },
      },
    },
  },

The required rules works, but the sameAsPassword rule is not working. It always return error, even I am sure I am inputting the same password. I guess it is not comparing to a correct field. How can I set the rule so that it is comparing to the correct field?

like image 488
cytsunny Avatar asked May 07 '19 02:05

cytsunny


People also ask

What is $dirty in Vuelidate?

Vuelidate tracks the $dirty state of each property. This is used to keep fields from showing as invalid, before the user has interacted with them. A property is considered $dirty after it has received some sort of interaction from the user, which means all properties begin with a $dirty state of false .

What is a field validator?

Field validation is an automated process of ascertaining that each field contains the correct value before the form is accepted. The concept is straightforward.

How do you use VeeValidate?

All you need is to add the v-validate directive to the input you wish to validate and make sure your input has a name attribute for error messages generation. Then, pass to the directive a rules string which contains a list of validation rules separated by a pipe ' | '.


2 Answers

new_password is not a sibling of repeat_password.data. From the built in validator docs

  • Locator can be either a sibling property name or a function. When provided as a function, it receives the model under validation as argument and this is bound to the component instance so you can access all its properties and methods, even in the scope of a nested validation.

So a function needs to be passed to sameAs:

validations: {
    form: {
      old_password: {
        data: { required },
      },
      new_password: {
        data: { required },
      },
      repeat_password: {
        data: { 
          sameAsPassword: sameAs(function() {
            return this.form.new_password.data;
          }) 
        },
      },
    },
  },

At the same time, for the this to be working inside the function, the data needed to be changed from arrow function to return data. i.e.

data() {
    return {
      form: {
        old_password: {
          data: '',
          type: 'password',
          label: 'Old Password',
        },
        new_password: {
          data: '',
          type: 'password',
          label: 'New Password',
        },
        repeat_password: {
          data: '',
          type: 'password',
          label: 'New Password Confirmation',
        },
      },
    }
  },
like image 110
logee Avatar answered Sep 22 '22 10:09

logee


First of all: it's not a good idea to use arrow function for data. You should use:

data() {
 return {
   form: {}
 }
}

You could get a context issues..

And I don't know if you need that data inside validations...you could try this:

export default {
  data() {
    return {
      form: {
        nestedA: '',
        nestedB: ''
      }
    }
  },
  validations: {
    form: {
      nestedA: {
        required
      },
      nestedB: {
        required
      }
    }
  }
}
like image 24
estevanj Avatar answered Sep 19 '22 10:09

estevanj