@vee-validate/joi v4.14.7
@vee-validate/joi
Official vee-validate integration with Joi schema validation
Guide
Joi is a feature rich validation library for the browser and nodejs
In their own words it is a:
The most powerful schema description language and data validator for JavaScript.
You can use joi as a typed schema with the @vee-validate/joi
package:
# npm
npm install @vee-validate/joi
# yarn
yarn add @vee-validate/joi
# pnpm
pnpm add @vee-validate/joi
The @vee-valdiate/joi
package exposes a toTypedSchema
function that accepts any joi schema. Which then you can pass along to validationSchema
option on useForm
.
This makes the form values and submitted values typed automatically and caters for both input and output types of that schema.
import { useForm } from 'vee-validate';
import { object, string } from 'joi';
import { toTypedSchema } from '@vee-validate/joi';
interface FormData {
email: string;
password: string;
name?: string;
}
const { values, handleSubmit } = useForm({
validationSchema: toTypedSchema(
object<FormData>({
email: string().min(1).required().message('required'),
password: string().min(1).message('required'),
name: string().optional(),
}),
),
});
// ❌ Type error, which means `values` is type-safe
values.email.endsWith('@gmail.com');
handleSubmit(submitted => {
// No errors, because email is required!
submitted.email.endsWith('@gmail.com');
// ❌ Type error, because `name` is not required so it could be undefined
// Means that your fields are now type safe!
submitted.name.length;
});
Joi default values
You can also define default values on your joi schema directly and it will be picked up by the form:
import { useForm } from 'vee-validate';
import { object, string } from 'joi';
import { toTypedSchema } from '@vee-validate/joi';
const { values, handleSubmit } = useForm({
validationSchema: toTypedSchema(
object({
email: string().default('something@email.com'),
password: string().default(''),
}),
),
});
Your initial values will be using the schema defaults, and also the defaults will be used if the values submitted is missing these fields.
14 days ago
28 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
5 months ago
6 months ago
6 months ago
7 months ago
7 months ago
9 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago