fabian-hiller · fabian-hiller · Sep 6, 2024 · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/packages/preact/CHANGELOG.md b/packages/preact/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to the library will be documented in this file.
 ## vX.X.X (Month DD, YYYY)
 
 - Add support for async validation with Zod (issue #233)
+- Add `validateOn` and `revalidateOn` option to `Field` and `FieldArray` component (pull request #247)
 
 ## v0.9.1 (June 27, 2024)
 

diff --git a/packages/preact/src/components/Field.tsx b/packages/preact/src/components/Field.tsx
@@ -17,6 +17,7 @@ import type {
   ResponseData,
   TransformField,
   ValidateField,
+  ValidationMode,
 } from '../types';
 import {
   getElementInput,
@@ -71,6 +72,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/preact/src/components/FieldArray.tsx b/packages/preact/src/components/FieldArray.tsx
@@ -11,6 +11,7 @@ import type {
   MaybeArray,
   ResponseData,
   ValidateFieldArray,
+  ValidationMode,
 } from '../types';
 import { initializeFieldArrayStore } from '../utils';
 
@@ -43,6 +44,8 @@ export type FieldArrayProps<
     store: FieldArrayStore<TFieldValues, TFieldArrayName>
   ) => ComponentChild;
   validate?: Maybe<MaybeArray<ValidateFieldArray<number[]>>>;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   keepActive?: Maybe<boolean>;
   keepState?: Maybe<boolean>;
 };

diff --git a/packages/preact/src/hooks/useLifecycle.ts b/packages/preact/src/hooks/useLifecycle.ts
@@ -15,6 +15,7 @@ import type {
   TransformField,
   ValidateField,
   ValidateFieldArray,
+  ValidationMode,
 } from '../types';
 import { getUniqueId, updateFormState } from '../utils';
 
@@ -33,6 +34,8 @@ type LifecycleProps<
     | MaybeArray<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>
     | MaybeArray<ValidateFieldArray<number[]>>
   >;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   transform?: Maybe<
     MaybeArray<TransformField<FieldPathValue<TFieldValues, TFieldName>>>
   >;
@@ -56,6 +59,8 @@ export function useLifecycle({
   name,
   store,
   validate,
+  validateOn,
+  revalidateOn,
   transform,
   keepActive = false,
   keepState = true,
@@ -68,6 +73,10 @@ export function useLifecycle({
         : [validate]
       : [];
 
+    // Set validation mode overrides
+    store.validateOn = validateOn;
+    store.revalidateOn = revalidateOn;
+
     // Add transformation functions
     if ('transform' in store) {
       store.transform = transform
@@ -76,7 +85,7 @@ export function useLifecycle({
           : [transform]
         : [];
     }
-  }, [store, transform, validate]);
+  }, [store, transform, validate, validateOn, revalidateOn]);
 
   useEffect(() => {
     // Create unique consumer ID

diff --git a/packages/preact/src/types/field.ts b/packages/preact/src/types/field.ts
@@ -1,6 +1,7 @@
 import type { Signal } from '@preact/signals';
 import type { FieldPath, FieldPathValue } from './path';
 import type { MaybeValue, MaybePromise, Maybe } from './utils';
+import type { ValidationMode } from './form';
 
 /**
  * Value type of the field value.
@@ -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/preact/src/types/fieldArray.ts b/packages/preact/src/types/fieldArray.ts
@@ -1,5 +1,6 @@
 import type { Signal } from '@preact/signals';
-import type { MaybePromise } from './utils';
+import type { Maybe, MaybePromise } from './utils';
+import type { ValidationMode } from './form';
 
 /**
  * Function type to validate a field array.
@@ -28,6 +29,8 @@ export type InternalFieldArrayStore = {
 
   // Other
   validate: ValidateFieldArray<number[]>[];
+  validateOn: Maybe<ValidationMode>;
+  revalidateOn: Maybe<ValidationMode>;
   consumers: Set<number>;
 };
 

diff --git a/packages/preact/src/utils/initializeFieldArrayStore.ts b/packages/preact/src/utils/initializeFieldArrayStore.ts
@@ -47,6 +47,8 @@ export function initializeFieldArrayStore<
 
       // Other
       validate: [],
+      validateOn: undefined,
+      revalidateOn: undefined,
       consumers: new Set(),
     };
 

diff --git a/packages/preact/src/utils/initializeFieldStore.ts b/packages/preact/src/utils/initializeFieldStore.ts
@@ -55,6 +55,8 @@ export function initializeFieldStore(
 
       // Other
       validate: [],
+      validateOn: undefined,
+      revalidateOn: undefined,
       transform: [],
       consumers: new Set(),
     };

diff --git a/packages/preact/src/utils/validateIfRequired.ts b/packages/preact/src/utils/validateIfRequired.ts
@@ -40,15 +40,18 @@ export function validateIfRequired<
   name: TFieldName | TFieldArrayName,
   { on: modes, shouldFocus = false }: ValidateOptions
 ): void {
+  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.submitted.peek()
           : fieldOrFieldArray.error.peek()
       )
-        ? form.internal.revalidateOn
-        : form.internal.validateOn
+        ? revalidateOn
+        : validateOn
     )
   ) {
     validate(form, name, { shouldFocus });

diff --git a/packages/qwik/CHANGELOG.md b/packages/qwik/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to the library will be documented in this file.
 ## vX.X.X (Month DD, YYYY)
 
 - Add support for async validation with Zod (issue #233)
+- Add `validateOn` and `revalidateOn` option to `Field` and `FieldArray` component (pull request #247)
 
 ## v0.26.1 (June 27, 2024)
 

diff --git a/packages/qwik/src/components/Field.tsx b/packages/qwik/src/components/Field.tsx
@@ -18,6 +18,7 @@ import type {
   ResponseData,
   TransformField,
   ValidateField,
+  ValidationMode,
 } from '../types';
 import { Lifecycle } from './Lifecycle';
 
@@ -54,6 +55,8 @@ export type FieldProps<
   validate?: Maybe<
     MaybeArray<QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>>
   >;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   transform?: Maybe<
     MaybeArray<QRL<TransformField<FieldPathValue<TFieldValues, TFieldName>>>>
   >;

diff --git a/packages/qwik/src/components/FieldArray.tsx b/packages/qwik/src/components/FieldArray.tsx
@@ -9,6 +9,7 @@ import type {
   MaybeArray,
   ResponseData,
   ValidateFieldArray,
+  ValidationMode,
 } from '../types';
 import { Lifecycle } from './Lifecycle';
 
@@ -26,6 +27,8 @@ export type FieldArrayProps<
     store: FieldArrayStore<TFieldValues, TFieldArrayName>
   ) => JSXOutput;
   validate?: Maybe<MaybeArray<QRL<ValidateFieldArray<number[]>>>>;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   keepActive?: Maybe<boolean>;
   keepState?: Maybe<boolean>;
 };

diff --git a/packages/qwik/src/components/Lifecycle.tsx b/packages/qwik/src/components/Lifecycle.tsx
@@ -22,6 +22,7 @@ import type {
   TransformField,
   ValidateField,
   ValidateFieldArray,
+  ValidationMode,
 } from '../types';
 import { getUniqueId, updateFormState } from '../utils';
 
@@ -43,6 +44,8 @@ type LifecycleProps<
     | MaybeArray<QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>>
     | MaybeArray<QRL<ValidateFieldArray<number[]>>>
   >;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   transform?: Maybe<
     MaybeArray<QRL<TransformField<FieldPathValue<TFieldValues, TFieldName>>>>
   >;
@@ -77,6 +80,8 @@ export function Lifecycle(
       of: form,
       store,
       validate,
+      validateOn,
+      revalidateOn,
       transform,
       keepActive = false,
       keepState = true,
@@ -96,6 +101,10 @@ export function Lifecycle(
             : [validate]
           : [];
 
+        // Set validation mode overrides
+        store.internal.validateOn = validateOn;
+        store.internal.revalidateOn = revalidateOn;
+
         // Add transformation functions
         if ('value' in store) {
           store.internal.transform = transform

diff --git a/packages/qwik/src/types/field.ts b/packages/qwik/src/types/field.ts
@@ -1,6 +1,7 @@
 import type { NoSerialize, QRL } from '@builder.io/qwik';
 import type { FieldPath, FieldPathValue } from './path';
 import type { Maybe, MaybePromise, MaybeValue } from './utils';
+import type { ValidationMode } from './form';
 
 /**
  * Value type of the field value.
@@ -87,6 +88,8 @@ export type InternalFieldStore<
   initialValue: Maybe<FieldPathValue<TFieldValues, TFieldName>>;
   startValue: Maybe<FieldPathValue<TFieldValues, TFieldName>>;
   validate: QRL<ValidateField<FieldPathValue<TFieldValues, TFieldName>>>[];
+  validateOn: Maybe<ValidationMode>;
+  revalidateOn: Maybe<ValidationMode>;
   transform: QRL<TransformField<FieldPathValue<TFieldValues, TFieldName>>>[];
   elements: FieldElement[];
   consumers: number[];

diff --git a/packages/qwik/src/types/fieldArray.ts b/packages/qwik/src/types/fieldArray.ts
@@ -1,7 +1,8 @@
 import type { QRL } from '@builder.io/qwik';
 import type { FieldValues } from './field';
 import type { FieldArrayPath } from './path';
-import type { MaybePromise } from './utils';
+import type { Maybe, MaybePromise } from './utils';
+import type { ValidationMode } from './form';
 
 /**
  * Function type to validate a field array.
@@ -22,6 +23,8 @@ export type InternalFieldArrayStore = {
   initialItems: number[];
   startItems: number[];
   validate: QRL<ValidateFieldArray<number[]>>[];
+  validateOn: Maybe<ValidationMode>;
+  revalidateOn: Maybe<ValidationMode>;
   consumers: number[];
 };
 

diff --git a/packages/qwik/src/utils/getInitialFieldArrayStore.ts b/packages/qwik/src/utils/getInitialFieldArrayStore.ts
@@ -34,6 +34,8 @@ export function getInitialFieldArrayStore<
       initialItems: [...initialItems],
       startItems: [...initialItems],
       validate: [],
+      validateOn: undefined,
+      revalidateOn: undefined,
       consumers: [],
     },
     name,

diff --git a/packages/qwik/src/utils/getInitialFieldStore.ts b/packages/qwik/src/utils/getInitialFieldStore.ts
@@ -51,6 +51,8 @@ export function getInitialFieldStore<
       initialValue,
       startValue: initialValue,
       validate: [],
+      validateOn: undefined,
+      revalidateOn: undefined,
       transform: [],
       elements: [],
       consumers: [],

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

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to the library will be documented in this file.
 ## vX.X.X (Month DD, YYYY)
 
 - Add support for async validation with Zod (issue #233)
+- Add `validateOn` and `revalidateOn` option to `Field` and `FieldArray` component (pull request #247)
 
 ## v0.8.1 (June 27, 2024)
 

diff --git a/packages/react/src/components/Field.tsx b/packages/react/src/components/Field.tsx
@@ -21,6 +21,7 @@ import type {
   ResponseData,
   TransformField,
   ValidateField,
+  ValidationMode,
 } from '../types';
 import {
   getElementInput,
@@ -74,6 +75,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/react/src/components/FieldArray.tsx b/packages/react/src/components/FieldArray.tsx
@@ -9,6 +9,7 @@ import type {
   MaybeArray,
   ResponseData,
   ValidateFieldArray,
+  ValidationMode,
 } from '../types';
 import { initializeFieldArrayStore } from '../utils';
 
@@ -41,6 +42,8 @@ export type FieldArrayProps<
     store: FieldArrayStore<TFieldValues, TFieldArrayName>
   ) => ReactNode;
   validate?: Maybe<MaybeArray<ValidateFieldArray<number[]>>>;
+  validateOn?: Maybe<ValidationMode>;
+  revalidateOn?: Maybe<ValidationMode>;
   keepActive?: Maybe<boolean>;
   keepState?: Maybe<boolean>;
 };