Vuelidate: Custom validators

[pylover]

As described in documents, the second argument of the custom validators would be the vm instance.

But it is not, in my case:

export function uniqueEmailValidator (value, context) {
  console.log(value)
  console.log(context)
}


export default {
    data () {
      return {
        credentials: {
          email: '',
          password: '',
          repeatPassword: ''
        },
        api: new APIClient(this, '/apiv1/members')
      }
    },
    validations: {
      credentials: {
        email: {
          required,          
          uniqueEMail: uniqueEmailValidator
        },
        password: {
          required,
          minLength: minLength(6),
          maxLength: maxLength(16)
        },
        repeatPassword: {
          sameAsPassword: sameAs('password')
        }
      }
    },

The actual value of the context is:

credentials: {
  email: '',
  password: '',
  repeatPassword: ''
}        

[Frizi]

Hi!

Documentation is right, but I'm afraid i have to work a bit on cleaner wording and provide a few more examples.

Citing myself :P

make use of the function context (this) to access any value on your component or use provided parentVm to access sibling properties

The actual function context this gives you access to a thing i call "root VM", which is always your whole component. The third argument, parent VM, is always just the dataset which is a parent to the validated property, effectively giving you a "shortcut" to it's siblings. That's the usual use case for forms, so that's what sameAs is using by default.

Try that

export function uniqueEmailValidator (value, parentVm) {
  console.log('rootVm', this)
  console.log('value'. value)
  console.log('parentVm', parentVm)
}

Try hooking that validator on different depth levels, you will see the difference immediately :)

[pylover]

Interesting, thanks a lot. i'll check it

[pylover]

Thanks a lot,the function context: this is working well as well.

Sorry for taking your time, instead of the reading documentation carefully.