Lazy validation & touch not working properly?

@vuelidate/core: ^2.0.0-alpha.12, @vuelidate/validators: ^2.0.0-alpha.11,

After updating to latest Vuelidate I’m unable to use lazy validation and I’m wondering what am I doing wrong. The simplest code I’m able to write:

<template>
  <form @submit.prevent="test">
    <input v-model="name" type="text"> 
    <button type="button" @click="v$.$touch()">touch</button>
    <button>submit</button>
  </form>

  <pre>{{ name }}</pre>

  <pre>dirty: {{ v$.$dirty }}</pre>
  <pre>error: {{ v$.$error }}</pre>
  <pre>invalid: {{ v$.$invalid }}</pre>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

export default defineComponent({
  name: 'Home',
  setup() {
    const name = ref('')

    const v$ = useVuelidate(
    {
        name: { required },
    },
    { name },
    { $lazy: true },
  )

  const test = () => {
    v$.value.$touch()

    if (!v$.value.$error) {
      console.log('success')
    }
  }

  return {v$, name, test}
  },
})
</script>

After submit, I get success regardless to name value. When I click touch first, it works. When remove $lazy, it works.

Is it a bug or intended behavior?

edit: listen for form submit instead of click

[khorsky]

I don’t understand “You are using the name instead of the v$.name.$model, which never makes it dirty”. When I log v$.dirty or v$.name.dirty right after the v$.$touch(), it’s true.

Just to make sure (and for others looking for solution), after your advice, my test method should look like this:

const test = async () => {
  v$.value.$touch()

  await nextTick()

  if (!v$.value.$error) {
    console.log('success')
  }
}

It seems a bit strange that I’ve to use Vue’s method to use validation library, but I’m still Vue beginner, so I cannot judge.

Your advice to use await v$.$validate() is complicated by the fact, that it’s type definition is readonly $validate?: () => Promise<boolean>, so TypeScript compiler complains about undefined object: Cannot invoke an object which is possibly 'undefined'.

It’s IMHO a pity that one can’t use v$.$validate in this way:

v$.$validate()
  .then(() => {
    // run on successful validation
  })
  .catch((errors) => {
    // validation fails, let's see all the errors
  })

but I guess it has some drawbacks.

[dobromir-hristov]

Released a fix for the types. The $validate is no longer optional 😃