👀 Views: 34 💬 Answers: 1 📅 Created: 2025-06-03

vuejs vuelidate validation dynamic-forms JavaScript

I'm learning this framework and I'm implementing a dynamic form in Vue 3 where users can add or remove multiple input fields for a list of items... However, I'm struggling with integrating Vuelidate for validation, especially when fields are added or removed dynamically. I've set up my form to include an array of objects, each representing an item with a name and a quantity, and I want to ensure all fields are validated correctly before submission. Here's a simplified version of my component: ```vue <template> <form @submit.prevent="submitForm"> <div v-for="(item, index) in items" :key="index"> <input v-model="item.name" type="text" placeholder="Item Name" /> <input v-model="item.quantity" type="number" placeholder="Quantity" /> <button @click.prevent="removeItem(index)">Remove</button> </div> <button @click.prevent="addItem">Add Item</button> <button type="submit">Submit</button> </form> </template> <script> import useVuelidate from '@vuelidate/core'; import { required, minValue } from '@vuelidate/validators'; import { ref } from 'vue'; export default { setup() { const items = ref([{ name: '', quantity: null }]); const rules = { items: { $each: { name: { required }, quantity: { required, minValue: 1 } } } }; const v$ = useVuelidate(rules, { items }); const addItem = () => { items.value.push({ name: '', quantity: null }); v$.$reset(); // Reset validations after adding a new item }; const removeItem = (index) => { items.value.splice(index, 1); v$.$reset(); // Reset validations after removing an item }; const submitForm = () => { v$.$touch(); if (v$.$invalid) { console.log('Form is invalid'); return; } console.log('Form submitted successfully!', items.value); }; return { items, addItem, removeItem, submitForm, v$ }; } }; </script> ``` After integrating Vuelidate, I notice that when I add new items, the validation state seems to reset and doesn't reflect the current state of the form fields. For instance, if I add two items, clear one of them, and then try to submit the form, I get unexpected validation errors for fields that are not currently visible (like the ones from removed items). The console logs show `Form is invalid`, but the validation errors don't specify which fields are actually failing. Is there a way to properly manage the validation state in Vuelidate when dynamically adding or removing fields, so that the form correctly reflects the current input state? I’m using Vue 3 and Vuelidate 2.x. Am I missing something obvious? Thanks in advance!