vuelidate – validating dynamically added/removed fields does not behave as expected

I’ve been working on a Vue 3 application that utilizes Vuelidate for form validation. The form includes dynamic fields, specifically the questions array, where users can add or remove fields as needed. Each field within the questions array has its own validation rules, such as being required.

The issue I’m facing is related to the validation state of the fields when a field is removed from the questions array. Here’s a detailed description of the problem:

1. Initial State:

   • Let’s say I have three fields in the questions array.
   • I interact with fields 2 and 3, triggering their validation. If they don’t meet the validation criteria, Vuelidate correctly marks them as invalid.

2. Removing a Field:

   • I decide to remove field 2 from the questions array.
   • Before removing the field, I call jobAdFormValidation.value.questions[questionIndex].$reset() to clear the validation state of the field being removed. This ensures that the validation state associated with the removed field is properly reset.

3. Shifting of Fields:

   • After removing field 2, field 3 shifts up and takes the position of field 2.
   • However, Vuelidate does not automatically update the validation state based on the new positions of the fields.

4. Validation State Issue:

   • The validation state that was previously associated with field 3 remains incorrectly attached to the original field 3 position, even though field 3 has now shifted up to become the new field 2.
   • As a result, the newly shifted field (now at position 2) loses its validation error state, even though it should retain the validation error from its previous position.

5. Adding a New Field:

   • If I then decide to add a new field at position 3 (where the deleted field used to be), Vuelidate incorrectly applies the validation error state from the previously removed field to this newly added field.
   • This means that the new field at position 3 starts with an invalid state, even though it hasn’t been interacted with or validated yet.

The core problem lies in how Vuelidate handles the validation state when fields are dynamically removed and the remaining fields shift positions. The validation state doesn’t correctly follow the fields as they move to new positions, leading to incorrect validation errors being applied to the wrong fields.

I’ve tried various approaches to resolve this issue, such as resetting the validation state of the removed field, revalidating the entire questions array, and even attempting to manually update the validation state. However, none of these solutions have completely addressed the problem of the validation state being lost or incorrectly applied when fields are removed and shifted.

This is how I define my rules:

 const questionRules = computed(() =>
    jobStore.jobAd.questions.map(() => ({
        id: { required, numeric },
        question: { required },
        idealAnswer: { required }
    }))
);

const rules = computed(() => ({
    title: { required, text },
    description: { required, text },
    roleName: { required, text },
    department: { text },
    salary: {
        currency: { required, text },
        min: { required, numeric },
        max: { required, numeric },
    },
    officeLocation: { required, text },
    employmentTypeCode: { required, text },
    candidateRequirements: jobStore.jobAd.candidateRequirements.map(() => ({
        id: { required, numeric },
        requirement: { required, text },
    })),
    candidateResponsibilities: jobStore.jobAd.candidateResponsibilities.map(() => ({
        id: { required, numeric },
        responsibility: { required, text},
    })),
    questions: questionRules.value,
    adGoLiveDate: { required, text },
    jobStartDate: { required, text },
    expiresAt: { required, text },
}));

I am not entirely sure what else I can do. All I want is to be able to add fields dynamically and have them validated. That is all, however vuelidate seems to just not like it.