fix: clean up validation state when fields are unmounted (#4982)

When fields are conditionally hidden with v-if, their validation results
(errors, meta) were persisting in the form state. This happened because
removePathState triggered a silent re-validation that would store errors
in extraErrorsBag for the now-removed fields.

The fix tracks paths that are being removed due to field unmount and
prevents the re-validation from adding errors back for those paths.
When a field is re-mounted, the tracking is cleared so validation
works normally again.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: logaretm

.changeset/fix-4982-nonrendered-validation.md

@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+Fix validation results persisting for fields that are no longer rendered (#4982)

packages/vee-validate/src/useForm.ts

@@ -129,6 +129,10 @@ export function useForm<
 
   const extraErrorsBag: Ref<FormErrorBag<TValues>> = ref({});
 
+  // Tracks paths that are being removed due to field unmount, to prevent
+  // re-validation from adding errors back for fields that are no longer rendered (#4982)
+  const REMOVED_PATHS = new Set<string>();
+
   const pathStateLookup = ref<Record<string, PathState>>({});
 
   const rebuildPathLookup = debounceNextTick(() => {
@@ -287,6 +291,9 @@ export function useForm<
       UNSET_BATCH.splice(unsetBatchIndex, 1);
     }
 
+    // Clear removed path tracking when a field is re-mounted (#4982)
+    REMOVED_PATHS.delete(pathValue);
+
     const id = FIELD_ID_COUNTER++;
     const state = reactive({
       id,
@@ -388,7 +395,10 @@ export function useForm<
 
           // field not rendered
           if (!pathState) {
-            setFieldError(path, messages);
+            // Skip setting errors for paths that were explicitly removed due to field unmount (#4982)
+            if (!REMOVED_PATHS.has(path)) {
+              setFieldError(path, messages);
+            }
 
             return validation;
           }
@@ -437,6 +447,14 @@ export function useForm<
         setFieldError(pathState, results.results[path]?.errors);
       });
 
+      // Clean up errors and tracking for paths that were removed due to field unmount (#4982)
+      if (REMOVED_PATHS.size) {
+        REMOVED_PATHS.forEach(path => {
+          delete extraErrorsBag.value[path as Path<TValues>];
+        });
+        REMOVED_PATHS.clear();
+      }
+
       return results;
     },
   );
@@ -594,6 +612,10 @@ export function useForm<
       unsetInitialValue(path);
       rebuildPathLookup();
       delete pathStateLookup.value[path];
+
+      // Track this path as removed so the pending silent validation
+      // won't re-add errors for it into extraErrorsBag (#4982)
+      REMOVED_PATHS.add(path);
     }
   }
 

packages/vee-validate/tests/useForm.spec.ts

@@ -1489,4 +1489,44 @@ describe('useForm()', () => {
     form.setValues({ file: f2 });
     expect(form.values.file).toEqual(f2);
   });
+
+  // #4982
+  test('validation results for not-rendered fields should not be present', async () => {
+    let form!: FormContext<any>;
+    const showFields = ref(true);
+    mountWithHoc({
+      setup() {
+        form = useForm({
+          validationSchema: z.object({
+            fname: z.string().min(1),
+            lname: z.string().min(1),
+          }),
+        });
+
+        return {
+          showFields,
+        };
+      },
+      template: `<div>
+        <template v-if="showFields">
+          <Field name="fname" />
+          <Field name="lname" />
+        </template>
+      </div>`,
+    });
+
+    await flushPromises();
+    // Fields are rendered, no errors should be present (silent validation on mount)
+    expect(form.errors.value.fname).toBe(undefined);
+    expect(form.errors.value.lname).toBe(undefined);
+
+    // Hide the fields
+    showFields.value = false;
+    await flushPromises();
+
+    // Fields are unmounted, their validation errors should NOT be present
+    expect(form.errors.value.fname).toBe(undefined);
+    expect(form.errors.value.lname).toBe(undefined);
+    expect(form.meta.value.valid).toBe(true);
+  });
 });