Fixxed bugs Form Validation

src/components/Form.astro

@@ -83,7 +83,8 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
 </form>
 
 <!-- Client validation & submit hook (no zod import here) -->
-<script type="module" define:vars={{ formId, showSuccesInput }}>
+<script type="module" is:inline define:vars={{ formId, showSuccesInput }}>
+    const start = () => {
         const INVALID_KLS = ["!border-danger", "focus-visible:ring-danger/40"];
         const VALID_KLS = ["!border-success", "focus-visible:ring-success/40"];
 
@@ -115,7 +116,8 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
                 (el) => el instanceof HTMLInputElement && el.type === "radio",
             );
             const checks = all.filter(
-            (el) => el instanceof HTMLInputElement && el.type === "checkbox",
+                (el) =>
+                    el instanceof HTMLInputElement && el.type === "checkbox",
             );
 
             const err = root.querySelector('[id$="-err"]');
@@ -157,7 +159,9 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
 
         function clearState(root) {
             const { ctrls, err } = fieldControls(root);
-        ctrls.forEach((c) => c.classList.remove(...INVALID_KLS, ...VALID_KLS));
+            ctrls.forEach((c) =>
+                c.classList.remove(...INVALID_KLS, ...VALID_KLS),
+            );
             ctrls[0]?.removeAttribute("aria-invalid");
             if (err) {
                 err.textContent = "";
@@ -183,11 +187,13 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
                     formEl.querySelectorAll(`[name="${CSS.escape(name)}"]`),
                 );
                 const radios = els.filter(
-                (el) => el instanceof HTMLInputElement && el.type === "radio",
+                    (el) =>
+                        el instanceof HTMLInputElement && el.type === "radio",
                 );
                 const checks = els.filter(
                     (el) =>
-                    el instanceof HTMLInputElement && el.type === "checkbox",
+                        el instanceof HTMLInputElement &&
+                        el.type === "checkbox",
                 );
 
                 if (radios.length) {
@@ -210,8 +216,13 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
                 const el = els[0];
 
                 if (el instanceof HTMLSelectElement && el.multiple) {
-                data[name] = Array.from(el.selectedOptions).map((o) => o.value);
+                    data[name] = Array.from(el.selectedOptions).map(
-            } else if (el instanceof HTMLInputElement && el.type === "file") {
+                        (o) => o.value,
+                    );
+                } else if (
+                    el instanceof HTMLInputElement &&
+                    el.type === "file"
+                ) {
                     data[name] = el.multiple
                         ? Array.from(el.files || [])
                         : (el.files?.[0] ?? null);
@@ -249,7 +260,9 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
             const schema = getSchema();
             if (!schema || !schema.shape || !schema.shape[name]) return;
 
-        const root = form.querySelector(`[data-field="${CSS.escape(name)}"]`);
+            const root = form.querySelector(
+                `[data-field="${CSS.escape(name)}"]`,
+            );
             if (!root) return;
 
             const { ctrls, isRadioGroup, isMultiCheckbox, checkboxes } =
@@ -275,7 +288,10 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
             } else {
                 // single control
                 const ctrl = ctrls[0];
-            if (ctrl instanceof HTMLInputElement && ctrl.type === "checkbox") {
+                if (
+                    ctrl instanceof HTMLInputElement &&
+                    ctrl.type === "checkbox"
+                ) {
                     value = ctrl.checked;
                 } else if (
                     ctrl instanceof HTMLInputElement &&
@@ -285,7 +301,9 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
                         ? Array.from(ctrl.files || [])
                         : (ctrl.files?.[0] ?? null);
                 } else if (ctrl instanceof HTMLSelectElement && ctrl.multiple) {
-                value = Array.from(ctrl.selectedOptions).map((o) => o.value);
+                    value = Array.from(ctrl.selectedOptions).map(
+                        (o) => o.value,
+                    );
                 } else {
                     value = ctrl.value;
                 }
@@ -294,7 +312,9 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
             const res = schema.shape[name].safeParse(value);
             setError(
                 root,
-            res.success ? "" : res.error.issues[0]?.message || "Invalid value",
+                res.success
+                    ? ""
+                    : res.error.issues[0]?.message || "Invalid value",
             );
         }
 
@@ -387,4 +407,13 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
             t.value = t.getAttribute("data-initial") || "";
             t.removeAttribute("data-initial");
         });
+    };
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", start, { once: true });
+    } else {
+        start();
+    }
+    // For Astro client routing / view transitions
+    document.addEventListener("astro:page-load", start);
 </script>