zod-form-data

Validation helpers for zod specifically for parsing FormData or URLSearchParams. This is particularly useful when using Remix and combos well with remix-validated-form.

The main goal of this library is deal with the pain point that everything in FormData is a string. Sometimes, properly validating this kind of data requires a lot of extra hoop jumping and preprocessing. With the helpers in zod-form-data, you can write your types closer to how you want to.

Example

import { zfd } from "zod-form-data";

const schema = zfd.formData({
  name: zfd.text(),
  age: zfd.numeric(z.number().min(25).max(50)),
  likesPizza: zfd.checkbox(),
});

// This example is using Remix, but it will work
// with any FormData or URLSearchParams
export const action = async ({ request }) => {
  const { name, age, likesPizza } = schema.parse(
    await request.formData()
  );
  // do something with parsed data
};

If you're also using remix-validated-form, you don't need to use zfd.formData, but it will still work correctly if you do.

const validator = withZod(
  z.object({
    name: zfd.text(),
    age: zfd.numeric(z.number().min(25).max(50)),
    likesPizza: zfd.checkbox(),
  })
);

Installation

npm install zod-form-data