How to validate input after removing focus from it in a vite+vue3+shadcn+vee-validate+zod project?

Question

I have a Vite+Vue3 project and I use Shadcn framework, and Vee-validate and Zod to create forms. When I start typing in a input, immediately form validation works and shows error until I enter the correct value. I want to show error after removing focus from input.

<script setup lang="ts"> 
import { Input } from '@/components/ui/input' 
import { Button } from '@/components/ui/button' 
import {   FormControl,   FormField,   FormItem,   FormMessage, } from '@/components/ui/form'
import { useForm } from 'vee-validate' 
import { toTypedSchema } from '@vee-validate/zod' 
import * as z from 'zod' 
import { vAutoAnimate } from '@formkit/auto-animate/vue'    
    
const formSchema = toTypedSchema(z.object({
    phone: z.coerce.string().length(10, {message: 'This phone number is invalid.'}) 
}))

const { handleSubmit } = useForm({
    validationSchema: formSchema 
})

const onSubmit = handleSubmit((phone) => {
    // 
}) 
</script>

<template>
    <form @submit="onSubmit">
        <FormField v-slot="{ componentField }" name="phone">
            <FormItem v-auto-animate>
                <FormControl>
                    <div class="relative mt-7">
                        <Input id="phone" type="number" placeholder="1234567890" class="pl-10" v-bind="componentField" />
                        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
                        +1
                        </span>
                    </div>
                </FormControl>
                <FormMessage />
            </FormItem>
        </FormField>
        <Button type="submit" size="lg" class="font-bold w-full mt-7 text-lg">
            continue
            <i class="isax isax-arrow-right-1 text-2xl ml-1"></i>
        </Button>
    </form> 
</template>

Answer 1

try to configure validation handlers

import { configure } from 'vee-validate';

// Default values
configure({
  validateOnBlur: true, // controls if `blur` events should trigger validation with `handleChange` handler
  validateOnChange: true, // controls if `change` events should trigger validation with `handleChange` handler
  validateOnInput: false, // controls if `input` events should trigger validation with `handleChange` handler
  validateOnModelUpdate: true, // controls if `update:modelValue` events should trigger validation with `handleChange` handler
});

or configure each form input:

<Field name="email" :validateOnBlur="false" :validateOnChange="false" :validateOnInput="false" />