Function: useValidation()
ts
function useValidation<TSchema>(
fullSchema: MaybeRef<TSchema>,
formInitialValues: MaybeRef<Record<string, any>>,
onSubmit: (values: DataTypeOf<TSchema>) => MaybePromise<void>,
additional: MaybeRef<Record<string, string>>,
overrides: MaybeRef<
Partial<
Record<
| "alternatives.all"
| "alternatives.any"
| "alternatives.match"
| "alternatives.one"
| "alternatives.types"
| "any.custom"
| "any.default"
| "any.failover"
| "any.invalid"
| "any.only"
| "any.ref"
| "any.required"
| "any.unknown"
| "array.base"
| "array.excludes"
| "array.hasKnown"
| "array.hasUnknown"
| "array.includes"
| "array.includesRequiredBoth"
| "array.includesRequiredKnowns"
| "array.includesRequiredUnknowns"
| "array.length"
| "array.max"
| "array.min"
| "array.orderedLength"
| "array.sort"
| "array.sort.mismatching"
| "array.sort.unsupported"
| "array.sparse"
| "array.unique"
| "boolean.base"
| "date.base"
| "date.format"
| "date.greater"
| "date.less"
| "date.max"
| "date.min"
| "date.format.iso"
| "date.format.javascript"
| "date.format.unix"
| "function.arity"
| "function.class"
| "function.maxArity"
| "function.minArity"
| "number.base"
| "number.greater"
| "number.infinity"
| "number.integer"
| "number.less"
| "number.max"
| "number.min"
| "number.multiple"
| "number.negative"
| "number.port"
| "number.positive"
| "number.precision"
| "number.unsafe"
| "object.and"
| "object.assert"
| "object.base"
| "object.instance"
| "object.length"
| "object.max"
| "object.min"
| "object.missing"
| "object.nand"
| "object.oxor"
| "object.pattern.match"
| "object.refType"
| "object.regex"
| "object.rename.multiple"
| "object.rename.override"
| "object.schema"
| "object.unknown"
| "object.with"
| "object.without"
| "object.xor"
| "string.alphanum"
| "string.base"
| "string.base64"
| "string.creditCard"
| "string.dataUri"
| "string.domain"
| "string.email"
| "string.empty"
| "string.guid"
| "string.hex"
| "string.hexAlign"
| "string.hostname"
| "string.ip"
| "string.ipVersion"
| "string.isoDate"
| "string.isoDuration"
| "string.length"
| "string.lowercase"
| "string.max"
| "string.min"
| "string.normalize"
| "string.token"
| "string.pattern.base"
| "string.pattern.name"
| "string.pattern.invert.base"
| "string.pattern.invert.name"
| "string.trim"
| "string.uri"
| "string.uriCustomScheme"
| "string.uriRelativeOnly"
| "string.uppercase"
| "symbol.base"
| "symbol.map"
| "binary.base"
| "binary.length"
| "binary.max"
| "binary.min"
| "bigint.base"
| "bigint.greater"
| "bigint.less"
| "bigint.max"
| "bigint.min"
| "bigint.multiple"
| "bigint.negative"
| "bigint.positive"
| "datetime.base"
| "datetime.exactly"
| "datetime.equals"
| "datetime.after"
| "datetime.greater"
| "datetime.before"
| "datetime.less"
| "datetime.afterOrEqual"
| "datetime.min"
| "datetime.beforeOrEqual"
| "datetime.max"
| "datetime.weekend"
| "datetime.weekday"
| "phone.base"
| "phone.invalid"
| "phone.fixedLine"
| "phone.mobile"
| "phone.strictFixedLine"
| "phone.strictMobile"
| "phone.fixedLineOrMobile"
| "phone.tollFree"
| "phone.premiumRate"
| "phone.sharedCost"
| "phone.voip"
| "phone.personalNumber"
| "phone.pager"
| "phone.uan"
| "phone.voicemail"
| "phone.unknown"
| "phone.types",
string
>
>
>,
options: MaybeRef<AsyncValidationOptions>,
name: string,
debug: MaybeRef<boolean>,
onPreventedSubmit: (
values: DataTypeOf<TSchema>,
error: ValidationError,
) => MaybePromise<void>,
fieldLabels: MaybeRef<Record<string, string>>,
commonFieldOptions: MaybeRef<Record<string, any>>,
specificFieldOptions: MaybeRef<Record<string, Record<string, any>>>,
): {
doFormSubmit: (e?: Event) => Promise<MaybePromise<void> | undefined>;
doResetForm: (
state?: Partial<FormState<any>>,
opts?: Partial<ResetFormOpts>,
) => void;
forceUpdateInitialValues: () => void;
forceUpdateSchema: () => void;
formBindings: ComputedRef<FormHTMLAttributes>;
formErrorBag: Ref<
Partial<Record<string, string[]>>,
Partial<Record<string, string[]>>
>;
formErrors: ComputedRef<Partial<Record<string, string | undefined>>>;
formFieldBindings: ComputedRef<Record<string, ValidationFieldBindings<any>>>;
formIsDirty: ComputedRef<boolean>;
formIsPending: ComputedRef<boolean>;
formIsSubmitting: Ref<boolean, boolean>;
formIsTouched: ComputedRef<boolean>;
formIsValid: ComputedRef<boolean>;
formIsValidating: Ref<boolean, boolean>;
formSubmitCount: Ref<number, number>;
formValues: any;
setFieldTouched: (field: string, isTouched: boolean) => void;
setFieldValue: (field: string, value: any) => void;
setTouched: (fields: boolean | Partial<Record<string, boolean>>) => void;
setValues: (fields: any, shouldValidate?: boolean) => void;
useField: (
path: string,
options?: {
validateOnBlur?: boolean;
validateOnChange?: boolean;
validateOnInput?: boolean;
validateOnModelUpdate?: boolean;
},
) => ComputedRef<ValidationFieldBindings<any>>;
validate: (
opts?: Partial<ValidationOptions$1>,
) => Promise<FormValidationResult<any, any>>;
validateField: <TPath>(
field: TPath,
opts?: Partial<ValidationOptions$1>,
) => Promise<ValidationResult<any>>;
validationSchema: ShallowRef<ObjectSchema<any>, ObjectSchema<any>>;
};Enterprise-grade form validation composable that bridges Joi schemas with VeeValidate and Vuetify. Provides comprehensive form state management, validation, and field binding generation.
Type Parameters
| Type Parameter | Description |
|---|---|
TSchema extends Schema | The Joi schema type |
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
fullSchema | MaybeRef<TSchema> | undefined | Joi schema defining validation rules for the entire form |
formInitialValues | MaybeRef<Record<string, any>> | undefined | Initial values for form fields (determines which fields are active) |
onSubmit | (values: DataTypeOf<TSchema>) => MaybePromise<void> | undefined | Form submission handler receiving validated form values |
additional | MaybeRef<Record<string, string>> | {} | Additional custom validation messages not in standard Joi set |
overrides | MaybeRef<Partial<Record< | "alternatives.all" | "alternatives.any" | "alternatives.match" | "alternatives.one" | "alternatives.types" | "any.custom" | "any.default" | "any.failover" | "any.invalid" | "any.only" | "any.ref" | "any.required" | "any.unknown" | "array.base" | "array.excludes" | "array.hasKnown" | "array.hasUnknown" | "array.includes" | "array.includesRequiredBoth" | "array.includesRequiredKnowns" | "array.includesRequiredUnknowns" | "array.length" | "array.max" | "array.min" | "array.orderedLength" | "array.sort" | "array.sort.mismatching" | "array.sort.unsupported" | "array.sparse" | "array.unique" | "boolean.base" | "date.base" | "date.format" | "date.greater" | "date.less" | "date.max" | "date.min" | "date.format.iso" | "date.format.javascript" | "date.format.unix" | "function.arity" | "function.class" | "function.maxArity" | "function.minArity" | "number.base" | "number.greater" | "number.infinity" | "number.integer" | "number.less" | "number.max" | "number.min" | "number.multiple" | "number.negative" | "number.port" | "number.positive" | "number.precision" | "number.unsafe" | "object.and" | "object.assert" | "object.base" | "object.instance" | "object.length" | "object.max" | "object.min" | "object.missing" | "object.nand" | "object.oxor" | "object.pattern.match" | "object.refType" | "object.regex" | "object.rename.multiple" | "object.rename.override" | "object.schema" | "object.unknown" | "object.with" | "object.without" | "object.xor" | "string.alphanum" | "string.base" | "string.base64" | "string.creditCard" | "string.dataUri" | "string.domain" | "string.email" | "string.empty" | "string.guid" | "string.hex" | "string.hexAlign" | "string.hostname" | "string.ip" | "string.ipVersion" | "string.isoDate" | "string.isoDuration" | "string.length" | "string.lowercase" | "string.max" | "string.min" | "string.normalize" | "string.token" | "string.pattern.base" | "string.pattern.name" | "string.pattern.invert.base" | "string.pattern.invert.name" | "string.trim" | "string.uri" | "string.uriCustomScheme" | "string.uriRelativeOnly" | "string.uppercase" | "symbol.base" | "symbol.map" | "binary.base" | "binary.length" | "binary.max" | "binary.min" | "bigint.base" | "bigint.greater" | "bigint.less" | "bigint.max" | "bigint.min" | "bigint.multiple" | "bigint.negative" | "bigint.positive" | "datetime.base" | "datetime.exactly" | "datetime.equals" | "datetime.after" | "datetime.greater" | "datetime.before" | "datetime.less" | "datetime.afterOrEqual" | "datetime.min" | "datetime.beforeOrEqual" | "datetime.max" | "datetime.weekend" | "datetime.weekday" | "phone.base" | "phone.invalid" | "phone.fixedLine" | "phone.mobile" | "phone.strictFixedLine" | "phone.strictMobile" | "phone.fixedLineOrMobile" | "phone.tollFree" | "phone.premiumRate" | "phone.sharedCost" | "phone.voip" | "phone.personalNumber" | "phone.pager" | "phone.uan" | "phone.voicemail" | "phone.unknown" | "phone.types", string>>> | {} | Override standard Joi validation messages with custom ones |
options | MaybeRef<AsyncValidationOptions> | {} | Joi validation options (async validation settings) |
name | string | ... | Form instance name for debugging and component identification |
debug | MaybeRef<boolean> | false | Enable debug logging for validation failures |
onPreventedSubmit | (values: DataTypeOf<TSchema>, error: ValidationError) => MaybePromise<void> | ... | - |
fieldLabels | MaybeRef<Record<string, string>> | {} | - |
commonFieldOptions | MaybeRef<Record<string, any>> | {} | - |
specificFieldOptions | MaybeRef<Record<string, Record<string, any>>> | {} | - |
Returns
ts
{
doFormSubmit: (e?: Event) => Promise<
| MaybePromise<void>
| undefined>;
doResetForm: (state?: Partial<FormState<any>>, opts?: Partial<ResetFormOpts>) => void;
forceUpdateInitialValues: () => void;
forceUpdateSchema: () => void;
formBindings: ComputedRef<FormHTMLAttributes>;
formErrorBag: Ref<Partial<Record<string, string[]>>, Partial<Record<string, string[]>>>;
formErrors: ComputedRef<Partial<Record<string, string | undefined>>>;
formFieldBindings: ComputedRef<Record<string, ValidationFieldBindings<any>>>;
formIsDirty: ComputedRef<boolean>;
formIsPending: ComputedRef<boolean>;
formIsSubmitting: Ref<boolean, boolean>;
formIsTouched: ComputedRef<boolean>;
formIsValid: ComputedRef<boolean>;
formIsValidating: Ref<boolean, boolean>;
formSubmitCount: Ref<number, number>;
formValues: any;
setFieldTouched: (field: string, isTouched: boolean) => void;
setFieldValue: (field: string, value: any) => void;
setTouched: (fields:
| boolean
| Partial<Record<string, boolean>>) => void;
setValues: (fields: any, shouldValidate?: boolean) => void;
useField: (path: string, options?: {
validateOnBlur?: boolean;
validateOnChange?: boolean;
validateOnInput?: boolean;
validateOnModelUpdate?: boolean;
}) => ComputedRef<ValidationFieldBindings<any>>;
validate: (opts?: Partial<ValidationOptions$1>) => Promise<FormValidationResult<any, any>>;
validateField: <TPath>(field: TPath, opts?: Partial<ValidationOptions$1>) => Promise<ValidationResult<any>>;
validationSchema: ShallowRef<ObjectSchema<any>, ObjectSchema<any>>;
}Object containing form state, field bindings, validation methods, and nested field helper
| Name | Type | Default value |
|---|---|---|
doFormSubmit() | (e?: Event) => Promise< | MaybePromise<void> | undefined> | - |
doResetForm() | (state?: Partial<FormState<any>>, opts?: Partial<ResetFormOpts>) => void | resetForm |
forceUpdateInitialValues() | () => void | updateInitialValues |
forceUpdateSchema() | () => void | - |
formBindings | ComputedRef<FormHTMLAttributes> | - |
formErrorBag | Ref<Partial<Record<string, string[]>>, Partial<Record<string, string[]>>> | errorBag |
formErrors | ComputedRef<Partial<Record<string, string | undefined>>> | errors |
formFieldBindings | ComputedRef<Record<string, ValidationFieldBindings<any>>> | fieldBindings |
formIsDirty | ComputedRef<boolean> | - |
formIsPending | ComputedRef<boolean> | - |
formIsSubmitting | Ref<boolean, boolean> | isSubmitting |
formIsTouched | ComputedRef<boolean> | - |
formIsValid | ComputedRef<boolean> | - |
formIsValidating | Ref<boolean, boolean> | isValidating |
formSubmitCount | Ref<number, number> | submitCount |
formValues | any | - |
setFieldTouched() | (field: string, isTouched: boolean) => void | - |
setFieldValue() | (field: string, value: any) => void | - |
setTouched() | (fields: | boolean | Partial<Record<string, boolean>>) => void | - |
setValues() | (fields: any, shouldValidate?: boolean) => void | - |
useField() | (path: string, options?: { validateOnBlur?: boolean; validateOnChange?: boolean; validateOnInput?: boolean; validateOnModelUpdate?: boolean; }) => ComputedRef<ValidationFieldBindings<any>> | - |
validate() | (opts?: Partial<ValidationOptions$1>) => Promise<FormValidationResult<any, any>> | - |
validateField() | <TPath>(field: TPath, opts?: Partial<ValidationOptions$1>) => Promise<ValidationResult<any>> | - |
validationSchema | ShallowRef<ObjectSchema<any>, ObjectSchema<any>> | formSchema |
Example
typescript
const schema = joi.object({
name: joi.string().required(),
email: joi.string().email().required(),
settings: joi.object({
theme: joi.string().valid("light", "dark"),
}),
});
const { formFieldBindings, useField, formIsValid, doFormSubmit } =
useValidation(
schema,
{ name: "", email: "", settings: { theme: "light" } },
async (values) => {
await api.saveUser(values);
},
);
// Use flat bindings
const nameField = formFieldBindings.name;
// Use nested fields
const themeField = useField("settings.theme");