Is there a way to use ZOD's validation for live success and error states? Like for when a user clicks out of the input
#ZOD Live Validation
modest heart
silver agateBOT
Hi @modest heart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The knowledge sources only describe using Zod (via astro/zod) on the server side for:
- Validating Astro Actions input (
input: z.object(...)) [Actions basic; Accepting form data] - Validating Content Collections and Live Content Collections schemas [Zod module; Live collections + Zod]
These are all request-time / runtime on the server, not “live” client-side validation (e.g. on blur / on change) in the browser.
Astro’s docs do not currently describe any built‑in mechanism for:
- Automatically wiring Zod schemas to inputs for “live” validation in the browser, or
- A helper that runs Zod on blur and exposes success/error UI states.
You can still use Zod yourself on the client (e.g. import z from astro/zod in a <script> or framework component and run .safeParse() on blur), but this pattern is not documented in the provided sources, so there’s no official, prescribed way described there.
So:
- Server-side / submit-time validation with Zod: fully supported and documented.
- Live client-side validation on blur using Zod: not documented in the Astro docs we have; you’d need to implement it manually.