Handling Nested Objects with Zod in Astro.js Forms

import { z } from "zod";

const addressSchema = z.object({
  street: z.string().min(5),
  city: z.string(),
  zipCode: z.string().regex(/^\d{5}$/),
  country: z.string()
});

const userSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  address: addressSchema
});

---
import { userSchema } from '../schemas';

const errors = {
  name: '',
  email: '',
  address: {
    street: '',
    city: '',
    zipCode: '',
    country: ''
  }
};

if (Astro.request.method === 'POST') {
  try {
    const formData = await Astro.request.formData();
    const userData = {
      name: formData.get('name'),
      email: formData.get('email'),
      address: {
        street: formData.get('address.street'),
        city: formData.get('address.city'),
        zipCode: formData.get('address.zipCode'),
        country: formData.get('address.country')
      }
    };

    const validatedData = userSchema.parse(userData);
    // Process your validated data here

  } catch (error) {
    if (error instanceof z.ZodError) {
      // Handle validation errors
      error.errors.forEach((err) => {
        const path = err.path.join('.');
        errors[path] = err.message;
      });
    }
  }
}
---

<form method="POST">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />
    {errors.name && <span class="error">{errors.name}</span>}
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
    {errors.email && <span class="error">{errors.email}</span>}
  </div>

  <fieldset>
    <legend>Address</legend>

    <div>
      <label for="street">Street:</label>
      <input type="text" id="street" name="address.street" />
      {errors.address?.street && <span class="error">{errors.address.street}</span>}
    </div>

    <!-- Similar fields for city, zipCode, and country -->
  </fieldset>

  <button type="submit">Submit</button>
</form>