solid-hook-form 2.4.0 → 2.5.1

package/dist/main.d.ts

@@ -104,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> = {

package/dist/main.js

@@ -315,7 +315,7 @@ var getResolverFields = (fields) => {
 
 // src/create_form.ts
 var createForm = (arg) => {
-  const { defaultValues, mode = "onChange", resolver } = arg;
+  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));
@@ -326,6 +326,9 @@ var createForm = (arg) => {
   const isValid = createMemo(() => {
     return !Object.keys(errors).length;
   });
+  const isTouched = (name) => {
+    return get(touchedFields(), name);
+  };
   const setError = (name, error, options) => {
     const field = getField(name);
     if (field) {
@@ -336,6 +339,13 @@ var createForm = (arg) => {
       focusField(name);
     }
   };
+  const renderError = (name, error) => {
+    if (error) {
+      setError(name, error);
+    } else {
+      clearError(name);
+    }
+  };
   const runSchema = async (names) => {
     if (!resolver) {
       return;
@@ -346,25 +356,17 @@ var createForm = (arg) => {
     });
     for (const name of names) {
       const error = get(result.errors, name);
-      if (error) {
-        setError(name, error);
-      } else {
-        clearError(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) {
-      setError(name, error);
-    } else {
-      clearError(name);
-    }
+    renderError(name, error);
   };
   const validateAllFields = async () => {
     if (resolver) {
@@ -393,7 +395,6 @@ var createForm = (arg) => {
       set(newState, name, value);
       return newState;
     });
-    validateField(name);
     checkDirty(name, value);
   };
   const register = (name, options = {}) => {
@@ -401,27 +402,32 @@ 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);
       },
       ref(element) {
-        const field = getField(name);
-        if (field) {
+        if (!element) {
           return;
         }
-        setField(name, element);
+        const field = getField(name);
+        if (field !== element) {
+          setField(name, element);
+        }
         setFieldValue(element, get(values(), name));
       }
     };
@@ -465,7 +471,9 @@ var createForm = (arg) => {
         return;
       }
       onError?.(errors);
-      focusFirstError();
+      if (shouldFocusError) {
+        focusFirstError();
+      }
     };
   };
   const reset = (values2, options = {}) => {

package/dist/main.jsx

@@ -324,7 +324,7 @@ var getResolverFields = (fields) => {
 
 // src/create_form.ts
 var createForm = (arg) => {
-  const { defaultValues, mode = "onChange", resolver } = arg;
+  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));
@@ -335,6 +335,9 @@ var createForm = (arg) => {
   const isValid = createMemo2(() => {
     return !Object.keys(errors).length;
   });
+  const isTouched = (name) => {
+    return get(touchedFields(), name);
+  };
   const setError = (name, error, options) => {
     const field = getField(name);
     if (field) {
@@ -345,6 +348,13 @@ var createForm = (arg) => {
       focusField(name);
     }
   };
+  const renderError = (name, error) => {
+    if (error) {
+      setError(name, error);
+    } else {
+      clearError(name);
+    }
+  };
   const runSchema = async (names) => {
     if (!resolver) {
       return;
@@ -355,25 +365,17 @@ var createForm = (arg) => {
     });
     for (const name of names) {
       const error = get(result.errors, name);
-      if (error) {
-        setError(name, error);
-      } else {
-        clearError(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) {
-      setError(name, error);
-    } else {
-      clearError(name);
-    }
+    renderError(name, error);
   };
   const validateAllFields = async () => {
     if (resolver) {
@@ -402,7 +404,6 @@ var createForm = (arg) => {
       set(newState, name, value);
       return newState;
     });
-    validateField(name);
     checkDirty(name, value);
   };
   const register = (name, options = {}) => {
@@ -410,27 +411,32 @@ 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);
       },
       ref(element) {
-        const field = getField(name);
-        if (field) {
+        if (!element) {
           return;
         }
-        setField(name, element);
+        const field = getField(name);
+        if (field !== element) {
+          setField(name, element);
+        }
         setFieldValue(element, get(values(), name));
       }
     };
@@ -474,7 +480,9 @@ var createForm = (arg) => {
         return;
       }
       onError?.(errors);
-      focusFirstError();
+      if (shouldFocusError) {
+        focusFirstError();
+      }
     };
   };
   const reset = (values2, options = {}) => {

package/package.json

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