Zod
Zod validation example
Form input handling and Zod validation with vovk-zod . The request input is validated on the client-side before being sent to the server where it is validated again.
Result
Code
1import { z } from 'zod/v4';
2import { prefix, post, openapi, type VovkOutput } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('users-zod')
6export default class UserZodController {
7 @openapi({
8 summary: 'Update user (Zod)',
9 description: 'Update user by ID with Zod validation',
10 })
11 @post('{id}')
12 static updateUser = withZod({
13 body: z
14 .object({
15 name: z.string().describe('User full name'),
16 age: z.number().min(0).max(120).describe('User age'),
17 email: z.email().describe('User email'),
18 })
19 .describe('User object'),
20 params: z.object({
21 id: z.uuid().describe('User ID'),
22 }),
23 query: z.object({
24 notify: z.enum(['email', 'push', 'none']).describe('Notification type'),
25 }),
26 output: z
27 .object({
28 success: z.boolean().describe('Success status'),
29 })
30 .describe('Response object'),
31 async handle(req, { id }) {
32 const { name, age } = await req.json();
33 const notify = req.nextUrl.searchParams.get('notify');
34
35 // do something with the data
36 console.log(`Updating user ${id}:`, { name, age, notify });
37 return {
38 success: true,
39 } satisfies VovkOutput<typeof UserZodController.updateUser>;
40 },
41 });
42}
1import { z } from 'zod/v4';
2import { prefix, post, openapi, type VovkOutput } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('users-zod')
6export default class UserZodController {
7 @openapi({
8 summary: 'Update user (Zod)',
9 description: 'Update user by ID with Zod validation',
10 })
11 @post('{id}')
12 static updateUser = withZod({
13 body: z
14 .object({
15 name: z.string().describe('User full name'),
16 age: z.number().min(0).max(120).describe('User age'),
17 email: z.email().describe('User email'),
18 })
19 .describe('User object'),
20 params: z.object({
21 id: z.uuid().describe('User ID'),
22 }),
23 query: z.object({
24 notify: z.enum(['email', 'push', 'none']).describe('Notification type'),
25 }),
26 output: z
27 .object({
28 success: z.boolean().describe('Success status'),
29 })
30 .describe('Response object'),
31 async handle(req, { id }) {
32 const { name, age } = await req.json();
33 const notify = req.nextUrl.searchParams.get('notify');
34
35 // do something with the data
36 console.log(`Updating user ${id}:`, { name, age, notify });
37 return {
38 success: true,
39 } satisfies VovkOutput<typeof UserZodController.updateUser>;
40 },
41 });
42}
1import { z } from 'zod/v4';
2import { prefix, post, openapi, type VovkOutput } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('users-zod')
6export default class UserZodController {
7 @openapi({
8 summary: 'Update user (Zod)',
9 description: 'Update user by ID with Zod validation',
10 })
11 @post('{id}')
12 static updateUser = withZod({
13 body: z
14 .object({
15 name: z.string().describe('User full name'),
16 age: z.number().min(0).max(120).describe('User age'),
17 email: z.email().describe('User email'),
18 })
19 .describe('User object'),
20 params: z.object({
21 id: z.uuid().describe('User ID'),
22 }),
23 query: z.object({
24 notify: z.enum(['email', 'push', 'none']).describe('Notification type'),
25 }),
26 output: z
27 .object({
28 success: z.boolean().describe('Success status'),
29 })
30 .describe('Response object'),
31 async handle(req, { id }) {
32 const { name, age } = await req.json();
33 const notify = req.nextUrl.searchParams.get('notify');
34
35 // do something with the data
36 console.log(`Updating user ${id}:`, { name, age, notify });
37 return {
38 success: true,
39 } satisfies VovkOutput<typeof UserZodController.updateUser>;
40 },
41 });
42}
1import { z } from 'zod/v4';
2import { prefix, post, openapi, type VovkOutput } from 'vovk';
3import { withZod } from 'vovk-zod';
4
5@prefix('users-zod')
6export default class UserZodController {
7 @openapi({
8 summary: 'Update user (Zod)',
9 description: 'Update user by ID with Zod validation',
10 })
11 @post('{id}')
12 static updateUser = withZod({
13 body: z
14 .object({
15 name: z.string().describe('User full name'),
16 age: z.number().min(0).max(120).describe('User age'),
17 email: z.email().describe('User email'),
18 })
19 .describe('User object'),
20 params: z.object({
21 id: z.uuid().describe('User ID'),
22 }),
23 query: z.object({
24 notify: z.enum(['email', 'push', 'none']).describe('Notification type'),
25 }),
26 output: z
27 .object({
28 success: z.boolean().describe('Success status'),
29 })
30 .describe('Response object'),
31 async handle(req, { id }) {
32 const { name, age } = await req.json();
33 const notify = req.nextUrl.searchParams.get('notify');
34
35 // do something with the data
36 console.log(`Updating user ${id}:`, { name, age, notify });
37 return {
38 success: true,
39 } satisfies VovkOutput<typeof UserZodController.updateUser>;
40 },
41 });
42}
1'use client';
2import { useState, type FormEvent } from 'react';
3import { UserZodRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ZodFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserZodRPC.updateUser> | null>(null);
8 const [error, setError] = useState<Error | null>(null);
9 const [name, setName] = useState('');
10 const [email, setEmail] = useState('');
11 const [age, setAge] = useState(30);
12 const [disableClientValidation, setDisableClientValidation] = useState(false);
13 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
14 e.preventDefault();
15 try {
16 setResponse(
17 await UserZodRPC.updateUser({
18 body: { name, email, age },
19 query: { notify: 'push' },
20 params: { id: '5a279068-35d6-4d67-94e0-c21ef4052eea' },
21 disableClientValidation,
22 })
23 );
24 setError(null);
25 } catch (e) {
26 setError(e as Error);
27 setResponse(null);
28 }
29 };
30
31 return (
32 <form onSubmit={onSubmit}>
33 <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
34 <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
35 <label>Age:</label>
36 <input type="number" placeholder="Age" value={age} onChange={(e) => setAge(e.target.valueAsNumber)} />
37 <label className="block mb-4">
38 <input
39 type="checkbox"
40 className="mr-2"
41 checked={disableClientValidation}
42 onChange={(e) => setDisableClientValidation(e.target.checked)}
43 />
44 Disable client-side validation
45 </label>
46 <button>Submit</button>
47
48 {response && (
49 <div className="text-left">
50 <h3>Response:</h3>
51 <pre>{JSON.stringify(response, null, 2)}</pre>
52 </div>
53 )}
54
55 {error && <div className="overflow-auto">❌ {String(error)}</div>}
56 </form>
57 );
58}
1'use client';
2import { useState, type FormEvent } from 'react';
3import { UserZodRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ZodFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserZodRPC.updateUser> | null>(null);
8 const [error, setError] = useState<Error | null>(null);
9 const [name, setName] = useState('');
10 const [email, setEmail] = useState('');
11 const [age, setAge] = useState(30);
12 const [disableClientValidation, setDisableClientValidation] = useState(false);
13 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
14 e.preventDefault();
15 try {
16 setResponse(
17 await UserZodRPC.updateUser({
18 body: { name, email, age },
19 query: { notify: 'push' },
20 params: { id: '5a279068-35d6-4d67-94e0-c21ef4052eea' },
21 disableClientValidation,
22 })
23 );
24 setError(null);
25 } catch (e) {
26 setError(e as Error);
27 setResponse(null);
28 }
29 };
30
31 return (
32 <form onSubmit={onSubmit}>
33 <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
34 <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
35 <label>Age:</label>
36 <input type="number" placeholder="Age" value={age} onChange={(e) => setAge(e.target.valueAsNumber)} />
37 <label className="block mb-4">
38 <input
39 type="checkbox"
40 className="mr-2"
41 checked={disableClientValidation}
42 onChange={(e) => setDisableClientValidation(e.target.checked)}
43 />
44 Disable client-side validation
45 </label>
46 <button>Submit</button>
47
48 {response && (
49 <div className="text-left">
50 <h3>Response:</h3>
51 <pre>{JSON.stringify(response, null, 2)}</pre>
52 </div>
53 )}
54
55 {error && <div className="overflow-auto">❌ {String(error)}</div>}
56 </form>
57 );
58}
1'use client';
2import { useState, type FormEvent } from 'react';
3import { UserZodRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ZodFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserZodRPC.updateUser> | null>(null);
8 const [error, setError] = useState<Error | null>(null);
9 const [name, setName] = useState('');
10 const [email, setEmail] = useState('');
11 const [age, setAge] = useState(30);
12 const [disableClientValidation, setDisableClientValidation] = useState(false);
13 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
14 e.preventDefault();
15 try {
16 setResponse(
17 await UserZodRPC.updateUser({
18 body: { name, email, age },
19 query: { notify: 'push' },
20 params: { id: '5a279068-35d6-4d67-94e0-c21ef4052eea' },
21 disableClientValidation,
22 })
23 );
24 setError(null);
25 } catch (e) {
26 setError(e as Error);
27 setResponse(null);
28 }
29 };
30
31 return (
32 <form onSubmit={onSubmit}>
33 <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
34 <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
35 <label>Age:</label>
36 <input type="number" placeholder="Age" value={age} onChange={(e) => setAge(e.target.valueAsNumber)} />
37 <label className="block mb-4">
38 <input
39 type="checkbox"
40 className="mr-2"
41 checked={disableClientValidation}
42 onChange={(e) => setDisableClientValidation(e.target.checked)}
43 />
44 Disable client-side validation
45 </label>
46 <button>Submit</button>
47
48 {response && (
49 <div className="text-left">
50 <h3>Response:</h3>
51 <pre>{JSON.stringify(response, null, 2)}</pre>
52 </div>
53 )}
54
55 {error && <div className="overflow-auto">❌ {String(error)}</div>}
56 </form>
57 );
58}
1'use client';
2import { useState, type FormEvent } from 'react';
3import { UserZodRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ZodFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserZodRPC.updateUser> | null>(null);
8 const [error, setError] = useState<Error | null>(null);
9 const [name, setName] = useState('');
10 const [email, setEmail] = useState('');
11 const [age, setAge] = useState(30);
12 const [disableClientValidation, setDisableClientValidation] = useState(false);
13 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
14 e.preventDefault();
15 try {
16 setResponse(
17 await UserZodRPC.updateUser({
18 body: { name, email, age },
19 query: { notify: 'push' },
20 params: { id: '5a279068-35d6-4d67-94e0-c21ef4052eea' },
21 disableClientValidation,
22 })
23 );
24 setError(null);
25 } catch (e) {
26 setError(e as Error);
27 setResponse(null);
28 }
29 };
30
31 return (
32 <form onSubmit={onSubmit}>
33 <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
34 <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
35 <label>Age:</label>
36 <input type="number" placeholder="Age" value={age} onChange={(e) => setAge(e.target.valueAsNumber)} />
37 <label className="block mb-4">
38 <input
39 type="checkbox"
40 className="mr-2"
41 checked={disableClientValidation}
42 onChange={(e) => setDisableClientValidation(e.target.checked)}
43 />
44 Disable client-side validation
45 </label>
46 <button>Submit</button>
47
48 {response && (
49 <div className="text-left">
50 <h3>Response:</h3>
51 <pre>{JSON.stringify(response, null, 2)}</pre>
52 </div>
53 )}
54
55 {error && <div className="overflow-auto">❌ {String(error)}</div>}
56 </form>
57 );
58}
Last updated on