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

logaretm · Jul 8, 2023 · 68080d2 · 68080d2
1 parent e354a13
commit 68080d2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/.changeset/tough-pans-drum.md b/.changeset/tough-pans-drum.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat: use silent validation when field is initialized closes #4312
diff --git a/packages/vee-validate/src/types/forms.ts b/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> };

diff --git a/packages/vee-validate/src/useForm.ts b/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) {