Vue 3 Form Validation Not Triggering on Input Change - Need Insights
This might be a silly question, but Quick question that's been bugging me - After trying multiple solutions online, I still can't figure this out... I'm working on a Vue 3 application using VeeValidate for form validation and I'm working with an scenario where the validation does not trigger on input change as expected. I have a form set up with a couple of fields, and while the validation works on submit, it seems that the validation state does not update when I type into the input fields. Here’s a snippet of my code: ```javascript <template> <form @submit.prevent="handleSubmit"> <div> <label for="email">Email:</label> <input type="email" v-model="email" name="email" v-validate="'required|email'" /> <span v-if="errors.has('email')">{{ errors.first('email') }}</span> </div> <button type="submit">Submit</button> </form> </template> <script> import { useForm, useField } from 'vee-validate'; export default { setup() { const { handleSubmit, errors } = useForm(); const { value: email } = useField('email'); const onSubmit = () => { console.log('Form submitted!'); }; return { email, handleSubmit: handleSubmit(onSubmit), errors }; } }; </script> ``` I’ve confirmed that the VeeValidate library is correctly installed (version 4.3.0) and have looked through the documentation to ensure I’m using the right syntax. I even tried adding a watcher to the `email` variable to log its changes, and it updates just fine. However, the validation messages remain unchanged until I submit the form. I also checked the console for any warnings or errors, but there’s nothing that stands out. Does anyone know why the validation might not be updating in real-time? Any insights or recommendations would be greatly appreciated! Any help would be greatly appreciated! Cheers for any assistance! I recently upgraded to Javascript stable. I'm open to any suggestions.