👀 Views: 116 💬 Answers: 1 📅 Created: 2025-06-12

vue.js vee-validate form-validation JavaScript

I'm having trouble with I'm following best practices but I'm working with a Vue 3 application using VeeValidate for form validation, and I've encountered an scenario where validation does not trigger when the input fields lose focus (on blur). I expect the validation messages to show up, but they only appear when I try to submit the form. My goal is to provide immediate feedback to users as they fill out the form. Here's a minimal example of my setup: ```javascript import { defineComponent, ref } from 'vue'; import { useForm, useField } from 'vee-validate'; import * as yup from 'yup'; export default defineComponent({ setup() { const { handleSubmit } = useForm(); const { value: name, errorMessage: nameError, handleBlur } = useField( 'name', yup.string().required('Name is required') ); const onSubmit = handleSubmit((values) => { console.log('Form Submitted:', values); }); return { name, nameError, onSubmit, handleBlur }; } }); ``` And in my template: ```html <template> <form @submit.prevent="onSubmit"> <div> <label for="name">Name:</label> <input type="text" id="name" v-model="name" @blur="handleBlur" /> <span>{{ nameError }}</span> </div> <button type="submit">Submit</button> </form> </template> ``` I have tried changing the validation trigger to 'blur' in the `useField` method, but it hasn't resolved the scenario. Also, I confirmed that I’m on VeeValidate version 4.5.7, and Vue version 3.2.22. The validation works perfectly on submit but fails to activate when the input field loses focus. I've also checked the console for any errors but found nothing relevant. Any ideas on how I can achieve real-time validation on blur for my form fields?