Gathering detailed insights and metrics for zod-form-data
Gathering detailed insights and metrics for zod-form-data
Gathering detailed insights and metrics for zod-form-data
Gathering detailed insights and metrics for zod-form-data
@abyrd9/zod-form-data
A Zod-based form data validation library
svelte-zod-form
A Zod based type safe form for sveltekit. It works with progresive enhancements, and gives you full control over your own form. This works by making a proper structure reflecting that of the actual data structure to be used. It uses data properties under
@cokakoala/zod-form-data
Form data parser for Zod
zod-empty
generate minimum data from zod schema.
Easy form validation and state management for React and Remix
npm install zod-form-data
Typescript
Module System
Node Version
NPM Version
99.5
Supply Chain
100
Quality
85.5
Maintenance
100
Vulnerability
100
License
v7 -- React 19 & React Router 7 support
Updated on Dec 18, 2024
React/Remix 6.2.0
Updated on Sep 27, 2024
RVF v6 🎉
Updated on Aug 08, 2024
remix-validated-form-v5.1.0
Updated on Aug 14, 2023
Remix Validated Form v5.0.1
Updated on Jun 14, 2023
Remix Validated Form v5
Updated on Jun 13, 2023
TypeScript (89.75%)
MDX (8.27%)
JavaScript (1.24%)
CSS (0.71%)
Shell (0.03%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
4,018,733
Last Day
12,649
Last Week
59,240
Last Month
249,098
Last Year
2,370,602
MIT License
913 Stars
1,526 Commits
69 Forks
5 Watchers
19 Branches
48 Contributors
Updated on Mar 13, 2025
Minified
Minified + Gzipped
Latest Version
2.0.7
Package Id
zod-form-data@2.0.7
Unpacked Size
44.52 kB
Size
9.01 kB
File Count
14
NPM Version
10.5.1
Node Version
22.0.0
Published on
Mar 11, 2025
Cumulative downloads
Total Downloads
Last Day
31.4%
12,649
Compared to previous day
Last Week
8.1%
59,240
Compared to previous week
Last Month
9.9%
249,098
Compared to previous month
Last Year
84.1%
2,370,602
Compared to previous year
1
1
5
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.
1import { zfd } from "zod-form-data"; 2 3const schema = zfd.formData({ 4 name: zfd.text(), 5 age: zfd.numeric(z.number().min(25).max(50)), 6 likesPizza: zfd.checkbox(), 7}); 8 9// This example is using Remix, but it will work 10// with any `FormData` or `URLSearchParams` no matter where you get it from. 11export const action = async ({ request }) => { 12 const { name, age, likesPizza } = schema.parse(await request.formData()); 13 // do something with parsed data 14};
1npm install zod-form-data
The eventual goal is to have a helper to preprocess and/or validate most types of native inputs. If you have a helper for an input type that isn't in this library, feel free to open a PR to add it!
Contents
This helper takes the place of the z.object
at the root of your schema.
It wraps your schema in a z.preprocess
that extracts all the data out of a FormData
and transforms it into a regular object.
If the FormData
contains multiple entries with the same field name,
it will automatically turn that field into an array.
(If you're expecting multiple values for a field, use repeatable.)
The primary use-case for this helper is to accept FormData
,
but it works with any iterable that returns entries.
This means it can accept URLSearchParams
or regular objects as well.
You can use this the same way you would use z.object
.
1const schema = zfd.formData({ 2 field1: zfd.text(), 3 field2: zfd.text(), 4}); 5 6const someFormData = new FormData(); 7const dataObject = schema.parse(someFormData);
It's also possible to pass a zod schema to formData
.
1const schema = zfd.formData(
2 z.object({
3 field1: zfd.text(),
4 field2: zfd.text(),
5 }),
6);
Transforms any empty strings to undefined
before validating.
This makes it so empty strings will fail required checks,
allowing you to use optional
for optional fields instead of nonempty
for required fields.
If you call zfd.text
with no arguments, it will assume the field is a required string by default.
If you want to customize the schema, you can pass that as an argument.
1const const schema = zfd.formData({ 2 requiredString: zfd.text(), 3 stringWithMinLength: zfd.text(z.string().min(10)), 4 optional: zfd.text(z.string().optional()), 5})
Coerces numerical strings to numbers transforms empty strings to undefined
before validating.
If you call zfd.number
with no arguments,
it will assume the field is a required number by default.
If you want to customize the schema, you can pass that as an argument.
Note: The preprocessing only coerces the value into a number. It doesn't use parseInt
.
Something like "24px"
will not be transformed and will be treated as a string.
1const schema = zfd.formData({ 2 requiredNumber: zfd.numeric(), 3 numberWithMin: zfd.numeric(z.number().min(13)), 4 optional: zfd.numeric(z.number().optional()), 5});
Validates a checkbox field as a boolean.
Unlike other helpers, this is not a preprocesser,
but a complete schema that should do everything you need.
By default, it will treat "on"
as true and undefined
as false,
but you can customize the true value.
If you have a checkbox group and you want to leave the values as strings, repeatableField might be what you want.
1const schema = zfd.formData({ 2 defaultCheckbox: zfd.checkbox(), 3 checkboxWithValue: zfd.checkbox({ trueValue: "true" }), 4 mustBeTrue: zfd.checkbox().refine((val) => val, "Please check this box"), 5});
If you're used to using client-side form libraries and haven't dealt with native form behavior much, the native checkbox behavior might be non-intuitive (it was for me).
Take this checkbox:
1<input name="myCheckbox" type="checkbox" />
If you check this checkbox and submit the form, the value in the FormData
will be "on"
.
If you add a value prop:
1<input name="myCheckbox" type="checkbox" value="someValue" />
Then the checked value of the checkbox will be "someValue"
instead of "on"
.
If you leave the checkbox unchecked,
the FormData
will not include an entry for myCheckbox
at all.
Transforms any empty File objects to undefined
before validating.
This makes it so empty files will fail required checks,
allowing you to use optional
for optional fields.
If you call zfd.file
with no arguments, it will assume the field is a required file by default.
1const schema = zfd.formData({ 2 requiredFile: zfd.file(), 3 optional: zfd.file(z.instanceof(File).optional()), 4});
There is a unique case in Remix when using a CustomUploadHandler,
the field will be a File
on the client side, but an ID string (or URL) after uploading on the server.
In this case you will need the schema to switch to string on the server:
1const baseSchema = z.object({
2 someOtherField: zfd.text(),
3});
4
5const clientSchema = z.formData(
6 baseSchema.and({
7 file: zfd.file(),
8 }),
9);
10
11const serverSchema = z.formData(
12 baseSchema.and({
13 file: z.string(),
14 }),
15);
Note: This will return File | string
for the type. TODO: Example of type safety for this
Preprocesses a field where you expect multiple values could be present for the same field name
and transforms the value of that field to always be an array.
This is specifically meant to work with data transformed by zfd.formData
(or by remix-validated-form
).
If you don't provide a schema, it will assume the field is an array of zfd.text fields. If you want to customize the type of the item, but don't care about validations on the array itself, you can use repeatableOfType.
1const schema = zfd.formData({ 2 myCheckboxGroup: zfd.repeatable(), 3 atLeastOneItem: zfd.repeatable(z.array(zfd.text()).min(1)), 4});
A convenience wrapper for repeatable. Instead of passing the schema for an entire array, you pass in the schema for the item type.
1const schema = zfd.formData({
2 repeatableNumberField: zfd.repeatableOfType(zfd.numeric()),
3});
No vulnerabilities found.
No security vulnerabilities found.