Use JSON to Zod for Form Validation

Start from a payload

A submitted form payload is a useful seed for a Zod schema because it shows the shape your UI actually sends. Generate the first pass with the JSON to Zod schema generator, then tighten the schema with domain rules that are not visible in a single sample.

Refine after generation

Generated schemas describe observed data. Production form validation should add user-facing constraints, normalized values, and precise error handling before the schema is shared by client and server code.

• Add `.email()` for email fields.
• Add `.min()` or `.max()` for constrained strings.
• Use enums when only known values are valid.
• Use `.trim()` or preprocessing when the submitted value may contain incidental whitespace.

Contact form starter

After using JSON to Zod for a contact form payload, rename the schema and add the rules that make invalid submissions fail before they reach an API route or server action.

const ContactFormSchema = z.object({
  name: z.string().trim().min(2),
  email: z.string().trim().email(),
  topic: z.enum(["sales", "support", "billing"]),
  message: z.string().trim().min(20).max(2000),
});

Client and server usage

Use the same schema on the client for immediate feedback and on the server for the trusted validation step. The client improves the form experience; the server protects the actual write or submit action.

const result = ContactFormSchema.safeParse(formValues);

if (!result.success) {
  return { ok: false, issues: result.error.flatten().fieldErrors };
}

await sendContactMessage(result.data);

Form validation checklist

A JSON sample cannot infer every business rule, so review the generated schema before shipping. The best production schema captures both the data shape and the intent of each field.

• Mark optional fields intentionally instead of relying only on missing sample keys.
• Add enum values for select inputs, radio groups, and fixed status choices.
• Add cross-field validation with `.refine()` only after the field-level rules are clear.
• Test empty strings, invalid formats, long strings, missing optional values, and valid submissions.

Use FrameworkKit to generate the starter code, then review the output before shipping it in production.

Zod validation resources

Related comparisons

Related tools