WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixxed bugs Form Validation

Browse Source
This commit is contained in:
Clintchiz
2025-08-16 15:08:50 +05:30
parent e55ecf8882
commit 3ed6dabff5
2 changed files with 128 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Form.astro
+124 -139
View File
@@ -83,13 +83,14 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
</form>
<!-- Client validation & submit hook (no zod import here) -->
<script is:inline 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"];
const form = document.getElementById(formId);
if (!form) throw new Error("Form element not found");
if (!form || form.dataset.__afInit) return;
form.dataset.__afInit = "1";
function getSchema() {
const name = form.dataset.schema;
@@ -102,15 +103,45 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
return typeof val === "function" ? val() : val;
}
// Prefer explicit [data-control]; fall back to any input/select/textarea
function unwrapToObject(schema) {
let cur = schema;
while (cur && cur._def) {
const t = cur._def.typeName;
if (t === "ZodObject") return cur;
if (t === "ZodEffects") {
cur = cur._def.schema;
continue;
}
if (
t === "ZodOptional" ||
t === "ZodNullable" ||
t === "ZodDefault" ||
t === "ZodBranded" ||
t === "ZodCatch"
) {
cur = cur._def.innerType;
continue;
}
if (t === "ZodPipeline") {
cur = cur._def.out;
continue;
}
break;
}
return null;
}
function getObjectShape(obj) {
if (!obj) return null;
const s = obj.shape ?? obj._def?.shape;
return typeof s === "function" ? s() : s;
}
function fieldControls(root) {
// Prefer explicit data-control, fallback to any control
let ctrls = root.querySelectorAll(
"input[data-control], select[data-control], textarea[data-control]",
"input[data-control],select[data-control],textarea[data-control]",
);
if (ctrls.length === 0)
ctrls = root.querySelectorAll("input,select,textarea");
const all = Array.from(ctrls);
const radios = all.filter(
(el) => el instanceof HTMLInputElement && el.type === "radio",
@@ -119,17 +150,13 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
(el) =>
el instanceof HTMLInputElement && el.type === "checkbox",
);
const err = root.querySelector('[id$="-err"]');
const isRadioGroup = radios.length > 1;
const isMultiCheckbox = checks.length > 1;
return {
ctrls: all, // includes the readonly summary input if present
ctrls: all,
err,
isRadioGroup,
isMultiCheckbox,
checkboxes: checks, // handy for multi-select
isRadioGroup: radios.length > 1,
isMultiCheckbox: checks.length > 1,
checkboxes: checks,
};
}
@@ -137,7 +164,6 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
const { ctrls, err } = fieldControls(root);
if (!ctrls.length) return;
const first = ctrls[0];
if (msg) {
if (showSuccesInput) first.classList.remove(...VALID_KLS);
first.classList.add(...INVALID_KLS);
@@ -156,7 +182,6 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
}
}
}
function clearState(root) {
const { ctrls, err } = fieldControls(root);
ctrls.forEach((c) =>
@@ -169,19 +194,75 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
}
}
// Robust data collector (radios, checkboxes, multi-select, files)
function validateField(name) {
const root = form.querySelector(
`[data-field="${CSS.escape(name)}"]`,
);
if (!root) return;
const { ctrls, isRadioGroup, isMultiCheckbox, checkboxes } =
fieldControls(root);
if (!ctrls.length) return;
let value;
if (isRadioGroup) {
const chosen = ctrls.find(
(el) =>
el instanceof HTMLInputElement &&
el.type === "radio" &&
el.checked,
);
value = chosen ? chosen.value : "";
} else if (isMultiCheckbox) {
value = checkboxes
.filter((c) => c.checked)
.map((c) => c.value || "on");
} else {
const ctrl = ctrls[0];
if (
ctrl instanceof HTMLInputElement &&
ctrl.type === "checkbox"
)
value = ctrl.checked;
else if (
ctrl instanceof HTMLInputElement &&
ctrl.type === "file"
)
value = ctrl.multiple
? Array.from(ctrl.files || [])
: (ctrl.files?.[0] ?? null);
else if (ctrl instanceof HTMLSelectElement && ctrl.multiple)
value = Array.from(ctrl.selectedOptions).map(
(o) => o.value,
);
else value = ctrl.value;
}
const schema = getSchema();
const obj = unwrapToObject(schema);
const shape = getObjectShape(obj);
const fieldSchema = shape?.[name];
if (!fieldSchema) return;
const res = fieldSchema.safeParse(value);
setError(
root,
res.success
? ""
: res.error.issues[0]?.message || "Invalid value",
);
}
function collectData(formEl) {
const names = new Set(
Array.from(
formEl.querySelectorAll(
"input[name], select[name], textarea[name]",
"input[name],select[name],textarea[name]",
),
)
.map((el) => el.getAttribute("name"))
.filter(Boolean),
);
const data = {};
for (const name of names) {
const els = Array.from(
formEl.querySelectorAll(`[name="${CSS.escape(name)}"]`),
@@ -195,38 +276,30 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
el instanceof HTMLInputElement &&
el.type === "checkbox",
);
if (radios.length) {
const chosen = radios.find((el) => el.checked);
data[name] = chosen ? chosen.value : "";
continue;
}
if (checks.length) {
if (checks.length > 1) {
data[name] = checks
.filter((el) => el.checked)
.map((el) => el.value || "on");
} else {
data[name] = checks[0].checked;
}
data[name] =
checks.length > 1
? checks
.filter((el) => el.checked)
.map((el) => el.value || "on")
: checks[0].checked;
continue;
}
const el = els[0];
if (el instanceof HTMLSelectElement && el.multiple) {
if (el instanceof HTMLSelectElement && el.multiple)
data[name] = Array.from(el.selectedOptions).map(
(o) => o.value,
);
} else if (
el instanceof HTMLInputElement &&
el.type === "file"
) {
else if (el instanceof HTMLInputElement && el.type === "file")
data[name] = el.multiple
? Array.from(el.files || [])
: (el.files?.[0] ?? null);
} else {
else {
const fd = new FormData(formEl);
data[name] = fd.get(name);
}
@@ -250,126 +323,41 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
setError(root, issue.message);
if (!firstRoot) firstRoot = root;
}
if (firstRoot) {
const { ctrls } = fieldControls(firstRoot);
ctrls[0]?.focus();
}
}
function validateField(name) {
console.log(name);
const schema = getSchema();
console.log(schema);
console.log(schema.shape);
console.log(schema.shape[name]);
if (!schema || !schema.shape || !schema.shape[name]) return;
const root = form.querySelector(
`[data-field="${CSS.escape(name)}"]`,
);
console.log(root);
if (!root) return;
const { ctrls, isRadioGroup, isMultiCheckbox, checkboxes } =
fieldControls(root);
if (!ctrls.length) return;
let value;
if (isRadioGroup) {
// one-of
const chosen = ctrls.find(
(el) =>
el instanceof HTMLInputElement &&
el.type === "radio" &&
el.checked,
);
value = chosen ? chosen.value : "";
} else if (isMultiCheckbox) {
// array<string> for MultiSelect / checkbox groups
value = checkboxes
.filter((c) => c.checked)
.map((c) => c.value || "on");
} else {
// single control
const ctrl = ctrls[0];
if (
ctrl instanceof HTMLInputElement &&
ctrl.type === "checkbox"
) {
value = ctrl.checked;
} else if (
ctrl instanceof HTMLInputElement &&
ctrl.type === "file"
) {
value = ctrl.multiple
? Array.from(ctrl.files || [])
: (ctrl.files?.[0] ?? null);
} else if (ctrl instanceof HTMLSelectElement && ctrl.multiple) {
value = Array.from(ctrl.selectedOptions).map(
(o) => o.value,
);
} else {
value = ctrl.value;
}
}
console.log(value);
const res = schema.shape[name].safeParse(value);
console.log(res);
setError(
root,
res.success
? ""
: res.error.issues[0]?.message || "Invalid value",
);
if (firstRoot) fieldControls(firstRoot).ctrls[0]?.focus();
}
const validateOn = (form.dataset.validateon || "input,blur,change")
.split(",")
.map((s) => s.trim())
.filter(Boolean);
if (validateOn.includes("input")) {
if (validateOn.includes("input"))
form.addEventListener("input", (e) => {
const root = e.target?.closest?.("[data-field]");
if (!root) return;
const name = root.getAttribute("data-field");
if (name) validateField(name);
const r = e.target?.closest?.("[data-field]");
const n = r?.getAttribute("data-field");
if (n) validateField(n);
});
}
if (validateOn.includes("blur")) {
if (validateOn.includes("blur"))
form.addEventListener(
"blur",
(e) => {
const root = e.target?.closest?.("[data-field]");
if (!root) return;
const name = root.getAttribute("data-field");
if (name) validateField(name);
const r = e.target?.closest?.("[data-field]");
const n = r?.getAttribute("data-field");
if (n) validateField(n);
},
true,
);
}
if (validateOn.includes("change")) {
if (validateOn.includes("change"))
form.addEventListener("change", (e) => {
const root = e.target?.closest?.("[data-field]");
if (!root) return;
const name = root.getAttribute("data-field");
if (name) validateField(name);
const r = e.target?.closest?.("[data-field]");
const n = r?.getAttribute("data-field");
if (n) validateField(n);
});
}
form.addEventListener("submit", async (e) => {
const schema = getSchema();
const onSubmitName = form.dataset.onsubmit;
if (!schema && !onSubmitName) return; // native submit
if (!schema && !onSubmitName) return;
e.preventDefault();
if (schema) {
const data = collectData(form);
const result = schema.safeParse(data);
@@ -378,12 +366,10 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
return;
}
form.querySelectorAll("[data-field]").forEach(clearState);
if (!onSubmitName) {
form.submit(); // native submit after validation
form.submit();
return;
}
const btn = form.querySelector('button[type="submit"]');
btn && (btn.disabled = true);
try {
@@ -424,6 +410,5 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
} else {
start();
}
// For Astro client routing / view transitions
document.addEventListener("astro:page-load", start);
</script>
src/pages/forms.astro
+4 -4
View File
@@ -9,8 +9,8 @@ import Base from "../layouts/Base.astro";
title="Create Project"
description="Fields marked * are required."
columns={2}
schemaName="projectSchema"
onSubmit="handleProjectSubmit"
schemaName="schema"
onSubmit="submit"
submitLabel="Create Project"
submitIcon="mdi:check"
resetOnSubmit
@@ -74,7 +74,7 @@ import Base from "../layouts/Base.astro";
<script>
import { z } from "zod";
window.projectSchema = z.object({
window.schema = z.object({
name: z.string().min(3, "Please enter at least 3 characters."),
email: z.string().email("Enter a valid email address."),
teamSize: z.coerce
@@ -95,7 +95,7 @@ import Base from "../layouts/Base.astro";
}),
});
window.handleProjectSubmit = async (data: any, form: any) => {
window.submit = async (data: any, form: any) => {
console.log("Validated data:", data);
};
</script>