I'm currently experimenting with using vee-validate alongside zod in my project, employing Composition API and custom error messages.
One issue that I've encountered is that when I click into the input field and then quickly click outside of it, the default Zod error message "Required" is displayed. It only shows the desired custom error message "Business name is required" if I enter text into the input and then remove it.
How can I prevent the default error message from showing up? I want the custom error message to be displayed consistently.
For a live demonstration, you can check out this version: https://stackblitz.com/edit/nuxt-starter-qlkfhp?file=components%2FMyForm.vue
<template>
<form class="m-6">
<InputText v-model="businessName" v-bind="businessNameAttrs" />
<div>{{ errors.businessName }}</div>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue';
import { z } from 'zod';
const formSchema = toTypedSchema(
z.object({
businessName: z.string().min(1, { message: 'Business name is required' }),
})
);
const { errors, handleSubmit, defineField } = useForm({
validationSchema: formSchema,
});
const [businessName, businessNameAttrs] = defineField('businessName');
</script>