vee-validate is a lightweight plugin for Vue.js that allows you to validate input fields, and display errors.
Easy, fast, flexible, progressive enhancement, and multiple languages. Compatible with Vue 3 and Vue 2.
Basic Usage
1. Import and register the Field and Form components.
import { Field, Form } from 'vee-validate';
export default { components: { Field, Form, }, // ... };
2. Apply a basic Require validator to a form field.
<Form v-slot="{ errors }"> <Field name="field" :rules="isRequired" /> <span>{{ errors.field }}</span> </Form>
export default { components: { Field, Form, }, methods: { isRequired(value) { return value ? true : 'This field is required'; }, }, };
3. You can also use the following composition functions to validate the form.
import { useField } from 'vee-validate';
export default { setup() { function isRequired(value) { if (value && value.trim()) { return true; } return 'This is required'; } const { errorMessage, value } = useField('fieldName', isRequired); return { errorMessage, value, }; }, };
<template> <div> <input v-model="value" type="text" /> <span>{{ errorMessage }}</span> </div> </template>
// form-level validation import { useForm, useField } from 'vee-validate';
export default { setup() { // Define a validation schema const simpleSchema = { email(value) { // validate email value and return messages... }, name(value) { // validate name value and return messages... }, }; // Create a form context with the validation schema useForm({ validationSchema: simpleSchema, }); // No need to define rules for fields const { value: email, errorMessage: emailError } = useField('email'); const { value: password, errorMessage: passwordError } = useField('password'); return { email, emailError, password, passwordError, }; }, };
<template> <div> <input name="email" v-model="email" /> <span>{{ emailError }}</span> <input name="password" v-model="password" type="password" /> <span>{{ passwordError }}</span> </div> </template>
Preview:
Changelog:
v4.12.2 (11/28/2023)
- Bugfixes
v4.12.0 (11/26/2023)
- Deprecated reactive initial values
- Added defineField API
- Added support for meta.required state for Typed Schemas only.
- DX improvements
- Bug Fixes
v4.11.8 (10/06/2023)
- (perf) Avoid triggering extra model value events
- Allow null as a valid Form prop type
v4.11.7 (08/22/2023)
- Removed default export from the @vee-validate/rules package which caused issues for ESM importing
- useSetFormValues now accepts values generic type parameters
- Exported missing internal types causing a build error
- Added Joi schema support , it was sneaked in a previous release tag but it is being announced here to acknowledge that addition.
- Valibot and Yup schemas now merge their default values with the initial form values, allowing you to use each lib’s schema defaults more freely
v4.11.6 (08/22/2023)
- Bugfix
v4.11.3 (08/22/2023)
- updates valibot support to v0.13.0 and replaces the usage of deprecated API methods
v4.11.2 (08/20/2023)
- You can now query fields meta state using isFieldTouched, isFieldDirty, and isFieldValid helpers on useForm.
- Bug Fixes
v4.11.0 (07/30/2023)
- Added composition functions to set field and form values, meta, and errors from their child components.
v4.10.8 (07/22/2023)
- Improve setFieldError and setFieldValue performance
v4.10.7 (07/16/2023)
- Bugfixes
v4.10.6 (07/08/2023)
- Bugfixes
- use silent validation when field is initialized
v4.10.5 (07/04/2023)
- Bugfixes
v4.10.3 (06/29/2023)
- Bugfixes
v4.10.2 (06/25/2023)
- Bugfix: defineXXXBinds not respecting validation config events
v4.10.1 (06/23/2023)
- Bugfixes
v4.10.0 (06/23/2023)
- Disabled syncVModel by default
- useForm#values is now readonly
- Allow custom models for defineComponentBinds
- handleBlur can be configured to run validations
- useField#syncVModel also accepts the model prop name
- Allow multiple messages to be returned in a validator function
- Bug Fixes
v4.9.6 (05/31/2023)
- Bugfixes
v4.9.4 (05/17/2023)
- Bugfixes
v4.9.3 (05/10/2023)
- Bugfixes
- Added isValidating on the form context
v4.9.2 (05/09/2023)
- Bugfixes
v4.9.1 (05/08/2023)
- Bugfixes
v4.9.0 (05/07/2023)
- useForm now exposes a new helper defineComponentBinds which allows you to create bindable objects for your components.
- Another helper exposed by useForm is defineInputBinds which allows you to create bindable objects for your HTML elements.
- setValues was deleting the other values not specified, now it only sets the fields partially as provided without deleting any values.
- If you were using a field’s meta with group fields (checkboxes/radio), each field had its own meta, with this release all those fields will have the exact same meta values.
- Validations are now run only when a value setter has been triggered, this should not break anything but if you were using nested values as field values you will get a warning and which alternative to use.
- Bug Fixes
v4.8.6 (04/16/2023)
- Published the offical vee-validate nuxt module
v4.8.5 (04/15/2023)
- Bugfixes
v4.8.4 (03/23/2023)
- Bugfixes
v4.8.2 (03/15/2023)
- Bugfixes
v4.8.1 (03/12/2023)
- You can now infer the input/output types from yup and zod validation schemas by using toTypedSchema helper from @vee-validate/yup and @vee-validate/zod packages.
v4.8.0 (03/12/2023)
- Bugfixes
v4.7.4 (02/06/2023)
- Added new resetField on useForm and <Form /> component slot props
- Exposed getValues and getErrors and getMeta on <Form /> component instance
- Exposed various types from the @vee-validate/i18n module
- Fixed an issue where unique field/rule special messages didn’t work when a label was provided
- ext rule using incorrect wildcard symbol
v4.7.3 (11/12/2022)
- Bugfixed
v4.7.2 (11/01/2022)
- Bugfixed
v4.7.1 (10/22/2022)
- Bugfixed
v4.7.0 (10/09/2022)
- Add Controlled values filtering
- Explicit form context option
v4.6.10 (09/29/2022)
- Fixed using File constructor while in SSR
v4.6.9 (09/19/2022)
- Fixed an issue where resetForm would leave behind null or undefined in array fields after reset
v4.6.8 (09/19/2022)
- Bugfixes
v4.6.7 (08/28/2022)
- Fixed an issue with async function validators not respecting the last run error messages
v4.6.6 (08/16/2022)
- Fixed emitted value when there are no model modifiers defined
v4.6.5 (08/11/2022)
- Fixed an issue where checkboxes bound to an object could fail unchecking
- Fixed an issue with field’s meta.dirty not being set correctly after calling resetField with a new value
v4.6.4 (08/07/2022)
- Fixed an issue where useFieldModel did not trigger validation for nested paths
v4.6.3 (08/06/2022)
- Avoid toggling field array checkboxes values when an item is removed
v4.6.2 (07/17/2022)
- Expose FieldOptions and FormOptions interfaces
- Avoid toggling field array checkboxes values when an item is removed
v4.6.1 (07/17/2022)
- Pass onInvalidSubmit prop to submitForm
v4.6.0 (07/11/2022)
- v-model with FieldArray API
- Keep values after fields are unmounted
- useFieldModel API
- Automatic v-model events with useField
- Added move() to FieldArray
- If you are using a native <input type=”file”> element its value will now respect the multiple attribute, if it is present and set to true then it will be an array of files. Otherwise, it will be a single file. This could be a breaking change for some.
v4.5.11 (04/10/2022)
- Fixed: Ignored validation of fields during unmounting
v4.5.10 (03/08/2022)
- Fixed an issue with da.json locale which caused the JSON file to not parse correctly
Download Details:
Author: logaretm
Live Demo: https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio
Download Link: https://github.com/logaretm/vee-validate/archive/master.zip
Official Website: https://github.com/logaretm/vee-validate
Install & Download:
# Yarn
$ yarn add vee-validate@next
# NPM
$ npm i vee-validate@next --save