Creating a Reusable Zod Error Parser for Forms

Why Create a Reusable Error Parser?

Zod gives great error information — but every form needs:

• A way to map Zod errors to individual inputs
• A flat structure like: { email: "Invalid", password: "Too short" }

Rather than rewrite this logic every time, let’s centralize it 💡

---

Building the parseZodErrors Utility

import { ZodError } from "zod";

export function parseZodErrors(error: ZodError) {
  const formatted: Record<string string> = {};
  const issues = error.issues;

  for (const issue of issues) {
    const path = issue.path.join(".");
    if (!formatted[path]) {
      formatted[path] = issue.message;
    }
  }

  return formatted;
}

Example Output:

{
  "email": "Invalid email address",
  "password": "Password must be at least 6 characters"
}

---

Using It in React Forms

import { parseZodErrors } from "@/utils/parseZodErrors";

const result = RegisterSchema.safeParse(formValues);

if (!result.success) {
  const fieldErrors = parseZodErrors(result.error);

  setFormErrors(fieldErrors);
}

Now your form can easily display:

{errors.email &amp;&amp; <p>{errors.email}</p>}

---

Advanced: Handling Nested Keys

For nested forms, you’ll still get dotted keys like user.email. You can:

• Leave them as-is for libraries like React Hook Form (supports dot notation)
• Or split them manually for deeply nested custom UIs

fieldErrors["user.email"]; // works if your form inputs use dot notation

> Bonus: You could extend parseZodErrors to support nested objects too, if your UI needs that.

---

Summary

• Centralize Zod error formatting in a reusable helper
• Map errors to form fields with issue.path.join(".")
• Works with any schema, flat or nested
• Makes frontend integration clean and repeatable

---

Next: Lesson 18 – Real-World Case Study: Validating a Blog Post Editor

---

Master the Code, Be the Guru!