👀 Views: 97 💬 Answers: 1 📅 Created: 2025-06-30

vue.js vee-validate form-validation javascript

Hey everyone, I'm running into an issue that's driving me crazy... I can't seem to get I've been researching this but I've searched everywhere and can't find a clear answer... I've been banging my head against this for hours. I'm facing an issue with form validation in my Vue.js 3 application using VeeValidate. I have a dynamic form where fields can be added or removed based on user input. However, I noticed that the validation is not triggering properly when the user modifies the input fields after a field is added. For example, when I dynamically add a text input for the user's email, changing the input does not show any validation errors until the form is submitted. Here’s a simplified version of my code: ```javascript <template> <form @submit.prevent="handleSubmit"> <div v-for="(field, index) in fields" :key="index"> <input v-model="field.value" @input="validateField(field)" /> <span v-if="field.error" class="error">{{ field.error }}</span> </div> <button type="button" @click="addField">Add Field</button> <button type="submit">Submit</button> </form> </template> <script> import { ref } from 'vue'; import { validate } from 'vee-validate'; export default { setup() { const fields = ref([{ value: '', error: '' }]); const validateField = (field) => { field.error = field.value ? '' : 'This field is required.'; }; const addField = () => { fields.value.push({ value: '', error: '' }); }; const handleSubmit = () => { fields.value.forEach(validateField); const hasErrors = fields.value.some(field => field.error); if (!hasErrors) { // Form submission logic console.log('Form submitted:', fields.value); } }; return { fields, addField, handleSubmit, validateField }; } }; ``` Even though I call `validateField` on input, the `error` property doesn’t update in real-time for newly added fields. I’ve tried using `nextTick` after updating the state and wrapping the validation logic within the `watch` method to see if that helps, but it hasn’t resolved the issue. Additionally, I've verified that my VeeValidate version is 4.5.7, and I am not seeing any console errors related to validation. Is there something I'm missing in my logic, or is this a known limitation when using VeeValidate with dynamic fields? Any suggestions would be greatly appreciated! This is part of a larger service I'm building. Am I missing something obvious? This is part of a larger application I'm building. What am I doing wrong? I'm working in a Ubuntu 20.04 environment. Any suggestions would be helpful. Hoping someone can shed some light on this. This is for a service running on Linux.