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?
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 .
Field validation is an automated process of ascertaining that each field contains the correct value before the form is accepted. The concept is straightforward.
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 ' | '.
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',
},
},
}
},
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
}
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With