Make (re)validateOn overridable per field

fabian-hiller · Sep 5, 2024 · d6d77d3 · d6d77d3
1 parent c9700d3
commit d6d77d3
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 3 deletions.
diff --git a/packages/solid/src/components/Field.tsx b/packages/solid/src/components/Field.tsx
@@ -20,6 +20,7 @@ import type {
   ResponseData,
   TransformField,
   ValidateField,
+  ValidationMode,
 } from '../types';
 import {
   getElementInput,
@@ -75,6 +76,8 @@ export type FieldProps<
   validate?: Maybe<
     MaybeArray<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>
   >;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   transform?: Maybe<
     MaybeArray<TransformField<FieldPathValue<TFieldValues, TFieldName>>>
   >;

diff --git a/packages/solid/src/components/FieldArray.tsx b/packages/solid/src/components/FieldArray.tsx
@@ -8,6 +8,7 @@ import type {
   MaybeArray,
   ResponseData,
   ValidateFieldArray,
+  ValidationMode,
 } from '../types';
 import { initializeFieldArrayStore } from '../utils';
 
@@ -40,6 +41,8 @@ export type FieldArrayProps<
     store: FieldArrayStore<TFieldValues, TFieldArrayName>
   ) => JSX.Element;
   validate?: Maybe<MaybeArray<ValidateFieldArray<number[]>>>;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   keepActive?: Maybe<boolean>;
   keepState?: Maybe<boolean>;
 };

diff --git a/packages/solid/src/primitives/createLifecycle.ts b/packages/solid/src/primitives/createLifecycle.ts
@@ -14,6 +14,7 @@ import type {
   TransformField,
   ValidateField,
   ValidateFieldArray,
+  ValidationMode,
 } from '../types';
 import { getUniqueId, updateFormState } from '../utils';
 
@@ -34,6 +35,8 @@ type LifecycleProps<
     | MaybeArray<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>
     | MaybeArray<ValidateFieldArray<number[]>>
   >;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   transform?: Maybe<
     MaybeArray<TransformField<FieldPathValue<TFieldValues, TFieldName>>>
   >;
@@ -57,6 +60,8 @@ export function createLifecycle({
   name,
   getStore,
   validate,
+  validateOn,
+  revalidateOn,
   transform,
   keepActive = false,
   keepState = true,
@@ -72,6 +77,10 @@ export function createLifecycle({
         : [validate]
       : [];
 
+    // Set validation mode overrides
+    store.validateOn = validateOn;
+    store.revalidateOn = revalidateOn;
+
     // Add transformation functions
     if ('transform' in store) {
       store.transform = transform

diff --git a/packages/solid/src/types/field.ts b/packages/solid/src/types/field.ts
@@ -1,4 +1,5 @@
 import type { Signal } from '../primitives';
+import type { ValidationMode } from './form';
 import type { FieldPath, FieldPathValue } from './path';
 import type { MaybeValue, MaybePromise, Maybe } from './utils';
 
@@ -89,6 +90,8 @@ export type InternalFieldStore<
 
   // Other
   validate: ValidateField<FieldPathValue<TFieldValues, TFieldName>>[];
+  validateOn: Maybe<ValidationMode>;
+  revalidateOn: Maybe<ValidationMode>;
   transform: TransformField<FieldPathValue<TFieldValues, TFieldName>>[];
   consumers: Set<number>;
 };

diff --git a/packages/solid/src/types/fieldArray.ts b/packages/solid/src/types/fieldArray.ts
@@ -1,4 +1,5 @@
 import type { Signal } from '../primitives';
+import type { ValidationMode } from './form';
 import type { MaybePromise } from './utils';
 
 /**
@@ -28,6 +29,8 @@ export type InternalFieldArrayStore = {
 
   // Other
   validate: ValidateFieldArray<number[]>[];
+  validateOn?: ValidationMode;
+  revalidateOn?: ValidationMode;
   consumers: Set<number>;
 };
 

diff --git a/packages/solid/src/utils/validateIfRequired.ts b/packages/solid/src/utils/validateIfRequired.ts
@@ -42,15 +42,18 @@ export function validateIfRequired<
   { on: modes, shouldFocus = false }: ValidateOptions
 ): void {
   untrack(() => {
+    const validateOn = fieldOrFieldArray.validateOn ?? form.internal.validateOn;
+    const revalidateOn =
+      fieldOrFieldArray.revalidateOn ?? form.internal.revalidateOn;
     if (
       (modes as string[]).includes(
         (
-          form.internal.validateOn === 'submit'
+          validateOn === 'submit'
             ? form.internal.submitted.get()
             : fieldOrFieldArray.error.get()
         )
-          ? form.internal.revalidateOn
-          : form.internal.validateOn
+          ? revalidateOn
+          : validateOn
       )
     ) {
       validate(form, name, { shouldFocus });