Zod Form Validation Complete Guide

# Zod Form Validation Complete Guide

Create robust, type-safe forms in your Google Antigravity applications using React Hook Form with Zod schema validation. This guide covers form setup, validation patterns, and server action integration.

## Schema Definition

Define validation schemas with Zod:

```typescript
// lib/schemas/prompt.ts
import { z } from "zod";

export const promptSchema = z.object({
  title: z
    .string()
    .min(5, "Title must be at least 5 characters")
    .max(100, "Title must be less than 100 characters"),
  description: z
    .string()
    .min(20, "Description must be at least 20 characters")
    .max(500, "Description must be less than 500 characters"),
  content: z
    .string()
    .min(100, "Content must be at least 100 characters")
    .max(10000, "Content must be less than 10,000 characters"),
  tags: z
    .array(z.string())
    .min(1, "Add at least one tag")
    .max(5, "Maximum 5 tags allowed"),
  category: z.enum(["react", "nextjs", "typescript", "python", "api"], {
    errorMap: () => ({ message: "Please select a category" }),
  }),
  isPublic: z.boolean().default(true),
});

export type PromptFormData = z.infer<typeof promptSchema>;

// Partial schema for drafts
export const promptDraftSchema = promptSchema.partial();
export type PromptDraftData = z.infer<typeof promptDraftSchema>;
```

## Form Component

Build the form with React Hook Form:

```typescript
// components/PromptForm.tsx
"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { promptSchema, type PromptFormData } from "@/lib/schemas/prompt";
import { useTransition } from "react";
import { submitPrompt } from "@/app/actions/prompts";

const CATEGORIES = [
  { value: "react", label: "React" },
  { value: "nextjs", label: "Next.js" },
  { value: "typescript", label: "TypeScript" },
  { value: "python", label: "Python" },
  { value: "api", label: "API Development" },
];

export function PromptForm() {
  const [isPending, startTransition] = useTransition();
  
  const {
    register,
    handleSubmit,
    control,
    formState: { errors, isDirty },
    reset,
    setError,
  } = useForm<PromptFormData>({
    resolver: zodResolver(promptSchema),
    defaultValues: {
      title: "",
      description: "",
      content: "",
      tags: [],
      category: undefined,
      isPublic: true,
    },
  });

  const onSubmit = (data: PromptFormData) => {
    startTransition(async () => {
      const result = await submitPrompt(data);
      
      if (result.error) {
        // Handle server-side validation errors
        if (result.fieldErrors) {
          Object.entries(result.fieldErrors).forEach(([field, message]) => {
            setError(field as keyof PromptFormData, {
              type: "server",
              message: message as string,
            });
          });
        }
        return;
      }
      
      reset();
      // Show success message or redirect
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      {/* Title Field */}
      <div>
        <label htmlFor="title" className="block text-sm font-medium mb-2">
          Title
        </label>
        <input
          id="title"
          {...register("title")}
          className={`w-full px-4 py-2 border rounded-lg ${
            errors.title ? "border-red-500" : "border-gray-300"
          }`}
          placeholder="Enter prompt title"
        />
        {errors.title && (
          <p className="mt-1 text-sm text-red-500">{errors.title.message}</p>
        )}
      </div>

      {/* Description Field */}
      <div>
        <label htmlFor="description" className="block text-sm font-medium mb-2">
          Description
        </label>
        <textarea
          id="description"
          {...register("description")}
          rows={3}
          className={`w-full px-4 py-2 border rounded-lg ${
            errors.description ? "border-red-500" : "border-gray-300"
          }`}
          placeholder="Brief description of the prompt"
        />
        {errors.description && (
          <p className="mt-1 text-sm text-red-500">
            {errors.description.message}
          </p>
        )}
      </div>

      {/* Submit Button */}
      <button
        type="submit"
        disabled={isPending || !isDirty}
        className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        {isPending ? "Submitting..." : "Submit Prompt"}
      </button>
    </form>
  );
}
```

## Server Action Integration

Handle form submission with server actions:

```typescript
// app/actions/prompts.ts
"use server";

import { promptSchema, type PromptFormData } from "@/lib/schemas/prompt";
import { createClient } from "@/lib/supabase/server";
import { revalidatePath } from "next/cache";

export async function submitPrompt(data: PromptFormData) {
  // Server-side validation
  const result = promptSchema.safeParse(data);
  
  if (!result.success) {
    const fieldErrors: Record<string, string> = {};
    result.error.issues.forEach((issue) => {
      const path = issue.path[0] as string;
      fieldErrors[path] = issue.message;
    });
    return { error: "Validation failed", fieldErrors };
  }

  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();

  if (!user) {
    return { error: "Unauthorized" };
  }

  const { error } = await supabase
    .from("prompts")
    .insert({
      ...result.data,
      user_id: user.id,
      slug: generateSlug(result.data.title),
    });

  if (error) {
    return { error: "Failed to create prompt" };
  }

  revalidatePath("/prompts");
  return { success: true };
}
```

## Best Practices

1. **Schema Reuse**: Share Zod schemas between client and server
2. **Error Mapping**: Transform validation errors to user-friendly messages
3. **Optimistic Updates**: Show immediate feedback while server processes
4. **Field-Level Validation**: Validate on blur for immediate feedback
5. **Accessible Forms**: Include proper labels and ARIA attributes
6. **Progressive Enhancement**: Forms should work without JavaScript