Password Confirmation Validation With Vue and Vee-Validate

vee-validate password confirmation validation in action

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.

Discussion
Nate says:

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”‘.

Leave a Reply