Custom Form Validation With Astro.js & Zod

Have you ever found yourself wrestling with form validation in your Astro.js projects? Today, we’re diving into creating a robust, type-safe form validation system using the powerful combination of Astro.js and Zod. This approach will not only make your forms more reliable but also provide an excellent developer experience.

Why Zod?

Before we dive in, let’s talk about why Zod is becoming the go-to choice for form validation. Zod brings TypeScript-first schema validation that’s both powerful and intuitive. It’s like having a strict but fair validator that ensures your data is exactly what you expect it to be.

Setting Up Our Validation System

Let’s build a practical example that you can adapt for your own projects. We’ll create a contact form that validates user input server-side using Zod schemas. Here’s what we’re going to cover:

1. Schema Definition
2. Form Handler Setup
3. Error Handling
4. User Feedback

First, let’s define our schema:

import { z } from "zod";

const contactFormSchema = z.object({
  name: z.string()
    .min(2, "Name must be at least 2 characters")
    .max(50, "Name must be less than 50 characters"),
  email: z.string()
    .email("Please enter a valid email address"),
  message: z.string()
    .min(10, "Message must be at least 10 characters")
    .max(500, "Message must be less than 500 characters"),
});

Implementing the Form Handler

Now that we have our schema set up, let’s create a form handler that processes and validates our data:

export const handleFormSubmission = async (formData: FormData) => {
  const rawData = {
    name: formData.get("name"),
    email: formData.get("email"),
    message: formData.get("message"),
  };

  const result = contactFormSchema.safeParse(rawData);

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

  // Process validated data here
  return {
    success: true,
    data: result.data,
  };
};

Best Practices and Tips

1. Always validate both client and server-side
2. Provide clear, user-friendly error messages
3. Use TypeScript inference to your advantage
4. Consider breaking down complex forms into smaller, manageable schemas

Remember, good validation isn’t just about preventing bad data – it’s about creating a smooth, intuitive user experience while maintaining data integrity.

Wrapping Up

By combining Astro.js with Zod, we’ve created a validation system that’s both powerful and developer-friendly. This approach gives us type safety, runtime validation, and a great developer experience all in one package.