diff --git a/packages/lib/examples/implementations/ValidateOnImpl/index.tsx b/packages/lib/examples/implementations/ValidateOnImpl/index.tsx
index a7b1c3b3..ba3f3711 100644
--- a/packages/lib/examples/implementations/ValidateOnImpl/index.tsx
+++ b/packages/lib/examples/implementations/ValidateOnImpl/index.tsx
@@ -40,8 +40,13 @@ export const ValidateOnImpl: Component = () => {
-
+
+
+ {JSON.stringify(formHandler._.getFormState(), null, 2)}
+
>
);
diff --git a/packages/lib/examples/implementations/ValidateOnZodImpl/index.stories.tsx b/packages/lib/examples/implementations/ValidateOnZodImpl/index.stories.tsx
new file mode 100644
index 00000000..77539e5d
--- /dev/null
+++ b/packages/lib/examples/implementations/ValidateOnZodImpl/index.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta } from 'storybook-solidjs';
+
+import { ValidateOnZodImpl } from '.';
+
+const meta = {
+ title: 'BS5 Implementations',
+ component: ValidateOnZodImpl,
+} satisfies Meta;
+
+export default meta;
+
+export const ValidateOnZod = {};
diff --git a/packages/lib/examples/implementations/ValidateOnZodImpl/index.tsx b/packages/lib/examples/implementations/ValidateOnZodImpl/index.tsx
new file mode 100644
index 00000000..b1bb97a8
--- /dev/null
+++ b/packages/lib/examples/implementations/ValidateOnZodImpl/index.tsx
@@ -0,0 +1,53 @@
+import { Component } from 'solid-js';
+import { useFormHandler } from '@hooks';
+import { zodSchema } from '@adapters';
+import { TextInput } from '@example-components';
+import { z } from 'zod';
+
+export type Schema = { name: string; email: string };
+
+export const schema = z.object({
+ name: z.string().min(1, 'Required field'),
+ email: z.string().email().min(1, 'Required field'),
+});
+
+export const ValidateOnZodImpl: Component = () => {
+ const formHandler = useFormHandler(zodSchema(schema), {
+ validateOn: ['input'],
+ });
+ const { formData } = formHandler;
+
+ const submit = async (event: Event) => {
+ event.preventDefault();
+ try {
+ await formHandler.validateForm();
+ alert(JSON.stringify(formData()));
+ formHandler.resetForm();
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ <>
+
+ >
+ );
+};
diff --git a/packages/lib/src/components/Field/index.tsx b/packages/lib/src/components/Field/index.tsx
index 5378822a..a2663a36 100644
--- a/packages/lib/src/components/Field/index.tsx
+++ b/packages/lib/src/components/Field/index.tsx
@@ -1,5 +1,5 @@
import { CommonEvent, FieldProps, SetFieldValueOptions, ValidateFieldOptions } from '@interfaces';
-import { createEffect, createUniqueId, splitProps } from 'solid-js';
+import { createEffect, createUniqueId, mergeProps, splitProps } from 'solid-js';
import { useFieldContext, withFieldProvider } from '@hocs';
import {
CheckboxField,
@@ -48,8 +48,8 @@ export const Field = withFieldProvider((props: FieldComponentProps) => {
* if no form field event attribute matches the expected interface.
*/
const onFieldBlur = (options?: ValidateFieldOptions) => {
- props.formHandler?.validateField?.(props.name, options);
props.formHandler?.touchField?.(props.name);
+ props.formHandler?.setFieldValue(props.name, props.formHandler?.getFieldValue(props.name), options);
};
/**
@@ -57,7 +57,7 @@ export const Field = withFieldProvider((props: FieldComponentProps) => {
*/
const onBlur: FieldComponentProps['onBlur'] = (event) => {
//Form handler prop validate and touch the field.
- onFieldBlur(props.onBlurOptions);
+ onFieldBlur({ ...props.onBlurOptions, validateOn: ['blur'] });
//onBlur prop is preserved
if (typeof props.onBlur === 'function') {
diff --git a/packages/lib/src/hooks/useFormHandler/index.ts b/packages/lib/src/hooks/useFormHandler/index.ts
index c957cf96..5c5390cf 100644
--- a/packages/lib/src/hooks/useFormHandler/index.ts
+++ b/packages/lib/src/hooks/useFormHandler/index.ts
@@ -199,8 +199,16 @@ export const useFormHandler = (validationSchema: ValidationSchema, o
_?: FormStateUpdateBehavior
): Promise => {
if (!path) return;
+ const validateOn = options?.validateOn || formHandlerOptions.validateOn;
+
+ options = {
+ touch: true,
+ dirty: true,
+ validate: hasEventTypes(validateOn),
+ mapValue: (value) => value,
+ ...options,
+ };
- options = { touch: true, dirty: true, validate: true, mapValue: (value) => value, ...options };
setFieldData(path, value, { mapValue: options.mapValue });
const promises = Promise.all([