solid-hook-form 2.3.0 → 2.5.0

package/dist/main.d.ts

@@ -29,6 +29,11 @@ type FieldError = {
     message?: Message;
 };
 type FieldErrors<F extends FormValues = FormValues> = Partial<Record<Path<F>, FieldError>>;
+type SetErrorOptions = {
+    shouldFocus?: boolean;
+};
+type SetError<F extends FormValues = FormValues> = (name: Path<F>, error: FieldError, options?: SetErrorOptions) => void;
+type ClearErrors<F extends FormValues = FormValues> = (name?: Path<F> | Path<F>[]) => void;
 
 type Ref = HTMLElement | null;
 type RegisterReturn<F extends FormValues> = {
@@ -99,7 +104,8 @@ type SubmitErrorHandler<F extends FormValues> = (errors: FieldErrors<F>) => void
 type HandleSubmit<F extends FormValues> = (onSubmit: SubmitHandler<F>, onError?: SubmitErrorHandler<F>) => (event: SubmitEvent) => void;
 type CreateFormArg<F extends FormValues> = {
     defaultValues: F;
-    mode?: "onChange" | "onSubmit" | "onBlur";
+    mode?: "onChange" | "onSubmit" | "onBlur" | "onTouched";
+    shouldFocusError?: boolean;
     resolver?: Resolver<F>;
 };
 type CreateFormReturn<F extends FormValues = FormValues> = {
@@ -120,6 +126,8 @@ type CreateFormReturn<F extends FormValues = FormValues> = {
     setValue: SetValue<F>;
     handleSubmit: HandleSubmit<F>;
     reset: Reset<F>;
+    setError: SetError<F>;
+    clearErrors: ClearErrors<F>;
     trigger: Trigger<F>;
 };
 type CreateForm = <F extends FormValues>(arg: CreateFormArg<F>) => CreateFormReturn<F>;

package/dist/main.js

@@ -1,5 +1,5 @@
 import { createContext, createSignal, createMemo, useContext } from 'solid-js';
-import { createStore, reconcile, produce } from 'solid-js/store';
+import { createStore, produce, reconcile } from 'solid-js/store';
 import { memo, createComponent } from 'solid-js/web';
 
 // src/create_form.ts
@@ -88,7 +88,7 @@ var createErrors = () => {
       })
     );
   };
-  const removeError = (name) => {
+  const clearError = (name) => {
     setErrors(
       produce((prevState) => {
         delete prevState[name];
@@ -101,12 +101,30 @@ var createErrors = () => {
     }
     setErrors(reconcile({}));
   };
+  const clearErrors = (name) => {
+    if (!name) {
+      resetErrors();
+      return;
+    }
+    if (typeof name === "string") {
+      clearError(name);
+      return;
+    }
+    setErrors(
+      produce((prevState) => {
+        name.forEach((name2) => {
+          delete prevState[name2];
+        });
+      })
+    );
+  };
   return {
     errors,
     appendError,
-    removeError,
+    clearError,
     resetErrors,
-    getError
+    getError,
+    clearErrors
   };
 };
 
@@ -119,10 +137,14 @@ var createFields = () => {
   const setField = (name, element) => {
     fields[name] = element;
   };
+  const focusField = (name) => {
+    getField(name)?.focus();
+  };
   return {
     fields,
     getField,
-    setField
+    setField,
+    focusField
   };
 };
 
@@ -293,26 +315,36 @@ var getResolverFields = (fields) => {
 
 // src/create_form.ts
 var createForm = (arg) => {
-  const { defaultValues, mode = "onChange", resolver } = arg;
-  const { fields, getField, setField } = createFields();
+  const { defaultValues, mode = "onChange", shouldFocusError = true, resolver } = arg;
+  const { fields, getField, setField, focusField } = createFields();
   const { rules, addRule, getRule } = createRules();
   const [values, setValues] = createSignal(structuredClone(defaultValues));
-  const { errors, appendError, removeError, resetErrors, getError } = createErrors();
+  const { errors, appendError, clearError, resetErrors, clearErrors, getError } = createErrors();
   const { touchedFields, addTouched, resetTouched } = createTouchedFields();
   const { dirtyFields, isDirty, checkDirty, resetDirty } = createDirtyFields(defaultValues);
   const { isSubmitted, submitCount, logSubmit, resetSubmit } = createSubmit();
   const isValid = createMemo(() => {
     return !Object.keys(errors).length;
   });
-  const setFieldError = (name, error) => {
+  const isTouched = (name) => {
+    return get(touchedFields(), name);
+  };
+  const setError = (name, error, options) => {
     const field = getField(name);
     if (field) {
       error.ref = field;
     }
     appendError(name, error);
+    if (options?.shouldFocus) {
+      focusField(name);
+    }
   };
-  const clearFieldError = (name) => {
-    removeError(name);
+  const renderError = (name, error) => {
+    if (error) {
+      setError(name, error);
+    } else {
+      clearError(name);
+    }
   };
   const runSchema = async (names) => {
     if (!resolver) {
@@ -324,25 +356,17 @@ var createForm = (arg) => {
     });
     for (const name of names) {
       const error = get(result.errors, name);
-      if (error) {
-        setFieldError(name, error);
-      } else {
-        clearFieldError(name);
-      }
+      renderError(name, error);
     }
   };
-  const validateField = (name) => {
+  const validateField = async (name) => {
     if (resolver) {
-      runSchema([name]);
+      await runSchema([name]);
       return;
     }
     const rule = getRule(name);
     const error = validate(values(), name, rule);
-    if (error) {
-      setFieldError(name, error);
-    } else {
-      clearFieldError(name);
-    }
+    renderError(name, error);
   };
   const validateAllFields = async () => {
     if (resolver) {
@@ -371,7 +395,6 @@ var createForm = (arg) => {
       set(newState, name, value);
       return newState;
     });
-    validateField(name);
     checkDirty(name, value);
   };
   const register = (name, options = {}) => {
@@ -379,18 +402,21 @@ var createForm = (arg) => {
     return {
       name,
       onInput(event) {
-        if (mode === "onChange") {
-          onFieldChange(event, name);
+        onFieldChange(event, name);
+        if (mode === "onChange" || mode === "onTouched" && isTouched(name)) {
+          validateField(name);
         }
       },
       onChange(event) {
-        if (mode === "onChange") {
-          onFieldChange(event, name);
+        onFieldChange(event, name);
+        if (mode === "onChange" || mode === "onTouched" && isTouched(name)) {
+          validateField(name);
         }
       },
       onBlur(event) {
-        if (mode === "onBlur") {
-          onFieldChange(event, name);
+        onFieldChange(event, name);
+        if (mode === "onBlur" || mode === "onTouched" && !isTouched(name)) {
+          validateField(name);
         }
         addTouched(name);
       },
@@ -443,7 +469,9 @@ var createForm = (arg) => {
         return;
       }
       onError?.(errors);
-      focusFirstError();
+      if (shouldFocusError) {
+        focusFirstError();
+      }
     };
   };
   const reset = (values2, options = {}) => {
@@ -489,6 +517,8 @@ var createForm = (arg) => {
     setValue,
     handleSubmit,
     reset,
+    setError,
+    clearErrors,
     trigger
   };
 };

package/dist/main.jsx

@@ -91,7 +91,7 @@ var createErrors = () => {
       })
     );
   };
-  const removeError = (name) => {
+  const clearError = (name) => {
     setErrors(
       produce((prevState) => {
         delete prevState[name];
@@ -104,12 +104,30 @@ var createErrors = () => {
     }
     setErrors(reconcile({}));
   };
+  const clearErrors = (name) => {
+    if (!name) {
+      resetErrors();
+      return;
+    }
+    if (typeof name === "string") {
+      clearError(name);
+      return;
+    }
+    setErrors(
+      produce((prevState) => {
+        name.forEach((name2) => {
+          delete prevState[name2];
+        });
+      })
+    );
+  };
   return {
     errors,
     appendError,
-    removeError,
+    clearError,
     resetErrors,
-    getError
+    getError,
+    clearErrors
   };
 };
 
@@ -122,10 +140,14 @@ var createFields = () => {
   const setField = (name, element) => {
     fields[name] = element;
   };
+  const focusField = (name) => {
+    getField(name)?.focus();
+  };
   return {
     fields,
     getField,
-    setField
+    setField,
+    focusField
   };
 };
 
@@ -302,26 +324,36 @@ var getResolverFields = (fields) => {
 
 // src/create_form.ts
 var createForm = (arg) => {
-  const { defaultValues, mode = "onChange", resolver } = arg;
-  const { fields, getField, setField } = createFields();
+  const { defaultValues, mode = "onChange", shouldFocusError = true, resolver } = arg;
+  const { fields, getField, setField, focusField } = createFields();
   const { rules, addRule, getRule } = createRules();
   const [values, setValues] = createSignal4(structuredClone(defaultValues));
-  const { errors, appendError, removeError, resetErrors, getError } = createErrors();
+  const { errors, appendError, clearError, resetErrors, clearErrors, getError } = createErrors();
   const { touchedFields, addTouched, resetTouched } = createTouchedFields();
   const { dirtyFields, isDirty, checkDirty, resetDirty } = createDirtyFields(defaultValues);
   const { isSubmitted, submitCount, logSubmit, resetSubmit } = createSubmit();
   const isValid = createMemo2(() => {
     return !Object.keys(errors).length;
   });
-  const setFieldError = (name, error) => {
+  const isTouched = (name) => {
+    return get(touchedFields(), name);
+  };
+  const setError = (name, error, options) => {
     const field = getField(name);
     if (field) {
       error.ref = field;
     }
     appendError(name, error);
+    if (options?.shouldFocus) {
+      focusField(name);
+    }
   };
-  const clearFieldError = (name) => {
-    removeError(name);
+  const renderError = (name, error) => {
+    if (error) {
+      setError(name, error);
+    } else {
+      clearError(name);
+    }
   };
   const runSchema = async (names) => {
     if (!resolver) {
@@ -333,25 +365,17 @@ var createForm = (arg) => {
     });
     for (const name of names) {
       const error = get(result.errors, name);
-      if (error) {
-        setFieldError(name, error);
-      } else {
-        clearFieldError(name);
-      }
+      renderError(name, error);
     }
   };
-  const validateField = (name) => {
+  const validateField = async (name) => {
     if (resolver) {
-      runSchema([name]);
+      await runSchema([name]);
       return;
     }
     const rule = getRule(name);
     const error = validate(values(), name, rule);
-    if (error) {
-      setFieldError(name, error);
-    } else {
-      clearFieldError(name);
-    }
+    renderError(name, error);
   };
   const validateAllFields = async () => {
     if (resolver) {
@@ -380,7 +404,6 @@ var createForm = (arg) => {
       set(newState, name, value);
       return newState;
     });
-    validateField(name);
     checkDirty(name, value);
   };
   const register = (name, options = {}) => {
@@ -388,18 +411,21 @@ var createForm = (arg) => {
     return {
       name,
       onInput(event) {
-        if (mode === "onChange") {
-          onFieldChange(event, name);
+        onFieldChange(event, name);
+        if (mode === "onChange" || mode === "onTouched" && isTouched(name)) {
+          validateField(name);
         }
       },
       onChange(event) {
-        if (mode === "onChange") {
-          onFieldChange(event, name);
+        onFieldChange(event, name);
+        if (mode === "onChange" || mode === "onTouched" && isTouched(name)) {
+          validateField(name);
         }
       },
       onBlur(event) {
-        if (mode === "onBlur") {
-          onFieldChange(event, name);
+        onFieldChange(event, name);
+        if (mode === "onBlur" || mode === "onTouched" && !isTouched(name)) {
+          validateField(name);
         }
         addTouched(name);
       },
@@ -452,7 +478,9 @@ var createForm = (arg) => {
         return;
       }
       onError?.(errors);
-      focusFirstError();
+      if (shouldFocusError) {
+        focusFirstError();
+      }
     };
   };
   const reset = (values2, options = {}) => {
@@ -498,6 +526,8 @@ var createForm = (arg) => {
     setValue,
     handleSubmit,
     reset,
+    setError,
+    clearErrors,
     trigger
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-hook-form",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",