vee-validate password confirmation validation in action
VeeValidate is a plugin for Vue.js offering a suite of form validation tools.
A common validation for password fields is to ensure two fields, one for the password and another for the confirmation input, actually match. If you looked over the list of stock validators and didn’t see it, the confirmed validator (although, perhaps oddly named) is what we want.
Check out the CodePen below for a working demo of the password confirmation validator.
Vee-Validate Password Confirmation Example
The official vee-validate docs are sparse on how this validator actually works. One tip to keep in mind: make use of the data-vv-as="password" attribute for the confirmation field. The value input for this attribute is used as the field label in the error message.
Hi Zach,
Thanks for writing this, I too found the vee-validate docs a little to sparse on how ‘confirmed’ works. I also struggled with it for awhile after your example, I think it’s really important to highlight that ‘confirmed:password’ will look for an element with the ‘ref=”password”‘ attribute. This is not a very good design imho as I would’ve assumed it would look for an input with ‘name=”password”‘.