feat: use silent validation when field is initialized closes #4312

Author: logaretm

.changeset/tough-pans-drum.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat: use silent validation when field is initialized closes #4312

packages/vee-validate/src/types/forms.ts

@@ -228,7 +228,7 @@ export interface PrivateFormContext<TValues extends GenericObject = GenericObjec
   keepValuesOnUnmount: MaybeRef<boolean>;
   validateSchema?: (mode: SchemaValidationMode) => Promise<FormValidationResult<TValues, TOutput>>;
   validate(opts?: Partial<ValidationOptions>): Promise<FormValidationResult<TValues, TOutput>>;
-  validateField(field: Path<TValues>): Promise<ValidationResult>;
+  validateField(field: Path<TValues>, opts?: Partial<ValidationOptions>): Promise<ValidationResult>;
   stageInitialValue(path: string, value: unknown, updateOriginal?: boolean): void;
   unsetInitialValue(path: string): void;
   handleSubmit: HandleSubmitFactory<TValues, TOutput> & { withControlled: HandleSubmitFactory<TValues, TOutput> };

packages/vee-validate/src/useForm.ts

@@ -149,6 +149,13 @@ export function useForm<
       return;
     }
 
+    // Move the error from the extras path if exists
+    if (typeof field === 'string') {
+      if (extraErrorsBag.value[normalizeFormPath(field) as Path<TValues>]) {
+        delete extraErrorsBag.value[normalizeFormPath(field) as Path<TValues>];
+      }
+    }
+
     state.errors = normalizeErrorItem(message);
     state.valid = !state.errors.length;
   }
@@ -291,10 +298,9 @@ export function useForm<
 
     pathStates.value.push(state);
 
-    // if it has errors before, validate it.
     if (errors.value[pathValue] && !initialErrors[pathValue]) {
       nextTick(() => {
-        validateField(pathValue);
+        validateField(pathValue, { mode: 'silent' });
       });
     }
 
@@ -500,6 +506,10 @@ export function useForm<
       return;
     }
 
+    nextTick(() => {
+      validateField(path, { mode: 'silent' });
+    });
+
     if (pathState.multiple && pathState.fieldsCount) {
       pathState.fieldsCount--;
     }
@@ -738,20 +748,20 @@ export function useForm<
     };
   }
 
-  async function validateField(path: Path<TValues>): Promise<ValidationResult> {
+  async function validateField(path: Path<TValues>, opts?: Partial<ValidationOptions>): Promise<ValidationResult> {
     const state = findPathState(path);
     if (state) {
       state.validated = true;
     }
 
     if (schema) {
-      const { results }: FormValidationResult<TValues, TOutput> = await validateSchema('validated-only');
+      const { results }: FormValidationResult<TValues, TOutput> = await validateSchema(opts?.mode || 'validated-only');
 
       return results[path] || { errors: [], valid: true };
     }
 
     if (state?.validate) {
-      return state.validate();
+      return state.validate(opts);
     }
 
     if (!state) {