- v1.4.0Latest
- v1.4.0Latest
- v1.3.0
- v1.2.0
- v1.1.0
- v1.1.0
- v1.1.0-rc.1
- v1.0.1
- v1.0.0
- v1.0.0-alpha.1
- 0.3.0-rc.3
- 0.3.0-rc.3
- 0.3.0-rc.2
- v0.3.0-rc.1
- v0.3.0-alpha.16
- v0.3.0-alpha.15
- v0.3.0-alpha.9
- v0.3.0-alpha.8
- v0.3.0-alpha.7
- v0.3.0-alpha.6
- v0.3.0-alpha.5
- v0.3.0-alpha.4
- v0.3.0-alpha.3
- v0.3.0-alpha.2
- v0.3.0-alpha.1
- v0.2.1
- v0.2.0
- v0.2.0
Zod Friendly Forms
Returns an object containing errors
and validData
. The errors
object
contains user-friendly error messages, making it easy to display validation
errors to the user, while the validData
object contains the typed and valid
data from the schema. This library can be used in any framework, both on the
server or client side and it allows for easy validation and handling of form
submissions.
Install (npm)
pnpm add zod-ff zod
Usage
// from deno.land
import { parseForm } from "https://deno.land/x/zod_ff";
// from npm
import { parseForm } from "zod-ff";
Create a zod schema.
import { z } from "zod";
const RegisterSchema = z.object({
age: z.number().positive().max(150),
email: z.string().email(),
password: z.string().min(8),
});
When you’re ready to validate your input data, go ahead and run the parseForm
function. If there are any errors, they will be available by input key.
import { parseForm } from "zod-ff";
const data = {
email: "invalid-email",
};
const { errors } = parseForm({ schema: RegisterSchema, data });
expect(errors).toStrictEqual({
age: "Number must be less than or equal to 150",
email: "Invalid email",
password: "Required",
});
If errors are undefined, the input was valid. A returned validData
object will
be typed with your response.
import { parseForm } from "zod-ff";
const data = {
age: 99,
email: "bob@example.com",
password: "bobobobobobob",
};
const { errors, validData } = parseForm<typeof RegisterSchema>({
schema: RegisterSchema,
data,
});
expect(errors).toBeUndefined();
expect(validData).toStrictEqual(data);
Nested Objects
If you use nested objects, by default, your results will be flattened.
const schema = z.object({
user: z.object({
email: z.string().email(),
}),
});
const data = {
user: {
email: "bob",
},
};
const { errors } = parseForm({ schema: RegisterSchema, data }, options);
expect(errors).toStrictEqual({
"user.email": "Invalid Email Address",
});
Examples
This library will work on the server or client, in any framework.
Svelte Examples
<script lang="ts">
import { z } from "zod";
import { parseForm } from "zod-ff";
import { handleLogin } from "./my-login-function";
let errors;
const LoginSchema = z.object({
email: z.string().email(),
password: z.string().min(8),
rememberMe: z.boolean(),
});
const loginForm = {
email: "",
password: "",
rememberMe: false,
};
async function submit() {
let { data, errors } = await parseForm<typeof LoginSchema>({ schema: LoginSchema, data: loginForm });
if (!errors) await handleLogin(data);
}
</script>
<form on:submit|preventDefault="{submit}">
<label for="email">Email
{#if errors?.email}<span class="error">{errors.email}</span>{/if}
<input
id="email"
name="email"
type="email"
required="required"
bind:value="{loginForm.email}"
/>
</label>
<label for="password">Password
{#if errors?.password}<span class="error">{errors.password}</span>{/if}
<input
id="password"
name="password"
type="password"
required="required"
bind:value="{loginForm.password}"
/>
</label>
<label for="rememberMe">Remember Me
<input id="rememberMe" type="checkbox" bind:checked="{loginForm.rememberMe}" />
</label>
<footer class="form-submit">
<button type="submit">Submit</button>
</footer>
</form>
React Example
import React, { useState } from "react";
import { z } from "zod";
import { parseForm } from "zod-ff";
import { handleLogin } from "./my-login-function";
const LoginSchema = z.object({
email: z.string().email(),
password: z.string().min(8),
rememberMe: z.boolean(),
});
const LoginForm = () => {
const [formData, setFormData] = useState({
email: "",
password: "",
rememberMe: false,
});
const [errors, setErrors] = useState({});
const handleSubmit = async (e) => {
e.preventDefault();
let { data, errors } = await parseForm({
schema: LoginSchema,
data: formData,
});
if (!errors) await handleLogin(data);
setErrors(errors);
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="email">
Email
{errors.email && <span className="error">{errors.email}</span>}
<input
id="email"
name="email"
type="email"
required
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
</label>
<label htmlFor="password">
Password
{errors.password && <span className="error">{errors.password}</span>}
<input
id="password"
name="password"
type="password"
required
value={formData.password}
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })}
/>
</label>
<label htmlFor="rememberMe">
Remember Me
<input
id="rememberMe"
type="checkbox"
checked={formData.rememberMe}
onChange={(e) =>
setFormData({ ...formData, rememberMe: e.target.checked })}
/>
</label>
<footer className="form-submit">
<button type="submit">Submit</button>
</footer>
</form>
);
};
Vue 3 Example
<template>
<form @submit.prevent="submit">
<label for="email">Email
<span class="error" v-if="errors.email">{{ errors.email }}</span>
<input
id="email"
name="email"
type="email"
required
v-model="formData.email"
/>
</label>
<label for="password">Password
<span class="error" v-if="errors.password">{{ errors.password }}</span>
<input
id="password"
name="password"
type="password"
required
v-model="formData.password"
/>
</label>
<label for="rememberMe">Remember Me
<input
id="rememberMe"
type="checkbox"
v-model="formData.rememberMe"
/>
</label>
<footer class="form-submit">
<button type="submit">Submit</button>
</footer>
</form>
</template>
<script>
import { z } from 'zod';
import { parseForm } from 'zod-ff';
import { handleLogin } from './my-login-function';
const LoginSchema = z.object({
email: z.string().email(),
password: z.string().min(8),
rememberMe: z.boolean(),
});
export default {
data() {
return {
formData: {
email: "",
password: "",
rememberMe: false,
},
errors: {}
};
},
methods: {
async submit() {
let { data, errors } = await parseForm({ schema: LoginSchema, data: this.formData });
if (!errors) await handleLogin(data);
this.errors = errors;
}
}
};
</script>