Vuelidate: My custom validator is not getting value from component where its have been called?

Question

For my registration page I created custom validator to check if inputed registration password matches specific criteria's. Like minLength 12 chars, must contains at least one digit etc.

The problem start here. Because by some means my custom validator do not get value when its fired. In console it shows undefined. Just in case I used mustache code to check if inputted data is written to variable. Yes it does. The validator code
This solution was found here click

import {  minLength, helpers } from '@vuelidate/validators';//all okey with import


const passwordValidators = {
    minLength: minLength(12),
    containsUppercase: helpers.withMessage(
        () => 'Password does not contain any Uppercase characters (A-Z)',
        function(value: string): boolean {
            console.log(value);//value is undefined
            return /[A-Z]/.test(value);
        }
    ),
    containsLowercase: helpers.withMessage(
        () => 'Password does not contain any lowercase characters (a-z)',
        function(value: string): boolean {
            console.log(value);//value is undefined
            return /[a-z]/.test(value);
        }
    ),
    containsNumber: helpers.withMessage(
        () => 'Password does not contain any digit characters (0-9)',
        function(value: string): boolean {
            console.log(value);//value is undefined
            return /[0-9]/.test(value);
        }
    )
}
export default passwordValidators

How it is used inside vue,js component

//somewhere up 
import passwordValidators from '@/validators/password-requirements';
import { required, email, sameAs } from '@vuelidate/validators';
//inside defineComponent
validations() {
            return {
                email: { required, email },
                password: {
                    required,
                    passwordValidators
                },
                firstName: { required },
                lastName: { required },
                confirmPassword: { required, sameAsPassword: sameAs(this.password) }
            }
        },

The version of the lib are:

"@vuelidate/core": "^2.0.0-alpha.34",
"@vuelidate/validators": "^2.0.0-alpha.26",

score 1 · Accepted Answer · answered Sep 28 '22 at 14:26

The solution was simple. Need to read and think documentation. According docs "Suppose you want a validator that checks if a string contains the word cool in it. You can write a plain JavaScript function to check that:"

So the validators are functions what are passed to objects. I passed object instead of functions

So instead of this

validations() {
            return {
                email: { required, email },
                password: {
                    required,
                    passwordValidators
                },
                firstName: { required },
                lastName: { required },
                confirmPassword: { required, sameAsPassword: sameAs(this.password) }
            }
        },

need to use this

validations() {
            return {
                email: { required, email },
                password: {
                    required,
                    ...passwordValidators //here is the diference
                },
                firstName: { required },
                lastName: { required },
                confirmPassword: { required, sameAsPassword: sameAs(this.password) }
            }
        },

What just happened you ask? I used spread operator to put inside password object needed custom validators from passwordValidators object.

Vuelidate: My custom validator is not getting value from component where its have been called?

1 Answers1