Valibot
Valibot validation example
Form input handling and Valibot validation. The request input is validated on the client-side before being sent to the server where it is validated again.
Result
Code
1import { prefix, post, openapi, type VovkOutput, createStandardValidation, KnownAny } from 'vovk';
2import { toJsonSchema } from '@valibot/to-json-schema';
3import * as v from 'valibot';
4
5const withValibot = createStandardValidation({
6 toJSONSchema: (model: v.BaseSchema<KnownAny, KnownAny, KnownAny>) => toJsonSchema(model),
7});
8
9@prefix('users-valibot')
10export default class UserValibotController {
11 @openapi({
12 summary: 'Update user (Valibot)',
13 description: 'Update user by ID with Valibot validation',
14 })
15 @post('{id}')
16 static updateUser = withValibot({
17 body: v.pipe(
18 v.object({
19 name: v.pipe(v.string(), v.description('User full name')),
20 age: v.pipe(v.number(), v.minValue(0), v.maxValue(120), v.description('User age')),
21 email: v.pipe(v.string(), v.email(), v.description('User email')),
22 }),
23 v.description('User object')
24 ),
25 params: v.object({
26 id: v.pipe(v.string(), v.uuid(), v.description('User ID')),
27 }),
28 query: v.object({
29 notify: v.pipe(v.picklist(['email', 'push', 'none']), v.description('Notification type')),
30 }),
31 output: v.pipe(
32 v.object({
33 success: v.pipe(v.boolean(), v.description('Success status')),
34 }),
35 v.description('Response object')
36 ),
37 async handle(req, { id }) {
38 const { name, age } = await req.json();
39 const notify = req.nextUrl.searchParams.get('notify');
40
41 // do something with the data
42 console.log(`Updating user ${id}:`, { name, age, notify });
43 return {
44 success: true,
45 } satisfies VovkOutput<typeof UserValibotController.updateUser>;
46 },
47 });
48}
1import { prefix, post, openapi, type VovkOutput, createStandardValidation, KnownAny } from 'vovk';
2import { toJsonSchema } from '@valibot/to-json-schema';
3import * as v from 'valibot';
4
5const withValibot = createStandardValidation({
6 toJSONSchema: (model: v.BaseSchema<KnownAny, KnownAny, KnownAny>) => toJsonSchema(model),
7});
8
9@prefix('users-valibot')
10export default class UserValibotController {
11 @openapi({
12 summary: 'Update user (Valibot)',
13 description: 'Update user by ID with Valibot validation',
14 })
15 @post('{id}')
16 static updateUser = withValibot({
17 body: v.pipe(
18 v.object({
19 name: v.pipe(v.string(), v.description('User full name')),
20 age: v.pipe(v.number(), v.minValue(0), v.maxValue(120), v.description('User age')),
21 email: v.pipe(v.string(), v.email(), v.description('User email')),
22 }),
23 v.description('User object')
24 ),
25 params: v.object({
26 id: v.pipe(v.string(), v.uuid(), v.description('User ID')),
27 }),
28 query: v.object({
29 notify: v.pipe(v.picklist(['email', 'push', 'none']), v.description('Notification type')),
30 }),
31 output: v.pipe(
32 v.object({
33 success: v.pipe(v.boolean(), v.description('Success status')),
34 }),
35 v.description('Response object')
36 ),
37 async handle(req, { id }) {
38 const { name, age } = await req.json();
39 const notify = req.nextUrl.searchParams.get('notify');
40
41 // do something with the data
42 console.log(`Updating user ${id}:`, { name, age, notify });
43 return {
44 success: true,
45 } satisfies VovkOutput<typeof UserValibotController.updateUser>;
46 },
47 });
48}
1import { prefix, post, openapi, type VovkOutput, createStandardValidation, KnownAny } from 'vovk';
2import { toJsonSchema } from '@valibot/to-json-schema';
3import * as v from 'valibot';
4
5const withValibot = createStandardValidation({
6 toJSONSchema: (model: v.BaseSchema<KnownAny, KnownAny, KnownAny>) => toJsonSchema(model),
7});
8
9@prefix('users-valibot')
10export default class UserValibotController {
11 @openapi({
12 summary: 'Update user (Valibot)',
13 description: 'Update user by ID with Valibot validation',
14 })
15 @post('{id}')
16 static updateUser = withValibot({
17 body: v.pipe(
18 v.object({
19 name: v.pipe(v.string(), v.description('User full name')),
20 age: v.pipe(v.number(), v.minValue(0), v.maxValue(120), v.description('User age')),
21 email: v.pipe(v.string(), v.email(), v.description('User email')),
22 }),
23 v.description('User object')
24 ),
25 params: v.object({
26 id: v.pipe(v.string(), v.uuid(), v.description('User ID')),
27 }),
28 query: v.object({
29 notify: v.pipe(v.picklist(['email', 'push', 'none']), v.description('Notification type')),
30 }),
31 output: v.pipe(
32 v.object({
33 success: v.pipe(v.boolean(), v.description('Success status')),
34 }),
35 v.description('Response object')
36 ),
37 async handle(req, { id }) {
38 const { name, age } = await req.json();
39 const notify = req.nextUrl.searchParams.get('notify');
40
41 // do something with the data
42 console.log(`Updating user ${id}:`, { name, age, notify });
43 return {
44 success: true,
45 } satisfies VovkOutput<typeof UserValibotController.updateUser>;
46 },
47 });
48}
1import { prefix, post, openapi, type VovkOutput, createStandardValidation, KnownAny } from 'vovk';
2import { toJsonSchema } from '@valibot/to-json-schema';
3import * as v from 'valibot';
4
5const withValibot = createStandardValidation({
6 toJSONSchema: (model: v.BaseSchema<KnownAny, KnownAny, KnownAny>) => toJsonSchema(model),
7});
8
9@prefix('users-valibot')
10export default class UserValibotController {
11 @openapi({
12 summary: 'Update user (Valibot)',
13 description: 'Update user by ID with Valibot validation',
14 })
15 @post('{id}')
16 static updateUser = withValibot({
17 body: v.pipe(
18 v.object({
19 name: v.pipe(v.string(), v.description('User full name')),
20 age: v.pipe(v.number(), v.minValue(0), v.maxValue(120), v.description('User age')),
21 email: v.pipe(v.string(), v.email(), v.description('User email')),
22 }),
23 v.description('User object')
24 ),
25 params: v.object({
26 id: v.pipe(v.string(), v.uuid(), v.description('User ID')),
27 }),
28 query: v.object({
29 notify: v.pipe(v.picklist(['email', 'push', 'none']), v.description('Notification type')),
30 }),
31 output: v.pipe(
32 v.object({
33 success: v.pipe(v.boolean(), v.description('Success status')),
34 }),
35 v.description('Response object')
36 ),
37 async handle(req, { id }) {
38 const { name, age } = await req.json();
39 const notify = req.nextUrl.searchParams.get('notify');
40
41 // do something with the data
42 console.log(`Updating user ${id}:`, { name, age, notify });
43 return {
44 success: true,
45 } satisfies VovkOutput<typeof UserValibotController.updateUser>;
46 },
47 });
48}
1'use client';
2import { useState, type FormEvent } from 'react';
3import { UserValibotRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ValibotFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserValibotRPC.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 UserValibotRPC.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 { UserValibotRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ValibotFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserValibotRPC.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 UserValibotRPC.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 { UserValibotRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ValibotFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserValibotRPC.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 UserValibotRPC.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 { UserValibotRPC } from 'vovk-client';
4import type { VovkReturnType } from 'vovk';
5
6export default function ValibotFormExample() {
7 const [response, setResponse] = useState<VovkReturnType<typeof UserValibotRPC.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 UserValibotRPC.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