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