vee-validate

Painless forms for Vue.js
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 4.15.0
- 4.14.7
- 4.14.6
- 4.14.5
- 4.14.4
- 4.14.3
- 4.14.2
- 4.14.1
- 4.14.0
- 4.13.2
- 4.13.1
- 4.13.0
- 4.12.8
- 4.12.7
- 4.12.6
- 4.12.5
- 4.12.4
- 4.12.3
- 4.12.2
- 4.12.1
- 4.12.0
- 4.12.0-alpha.1
- 4.12.0-alpha.0
- 4.11.8
- 4.11.7
- 4.11.6
- 4.11.5
- 4.11.4
- 4.11.3
- 4.11.2
- 4.11.1
- 4.11.0
- 4.10.9
- 4.10.8
- 4.10.7
- 4.10.6
- 4.10.5
- 4.10.4
- 4.10.3
- 4.10.2
- 4.10.1
- 4.10.0
- 4.9.6
- 4.9.5
- 4.9.4
- 4.9.3
- 4.9.2
- 4.9.1
- 4.9.0
- 4.8.6
- 4.8.5
- 4.8.4
- 4.8.3
- 4.8.2
- 4.8.1
- 4.8.0
- 4.7.4
- 4.7.3
- 4.7.2
- 4.7.1
- 4.7.0
- 4.6.10
- 4.6.9
- 4.6.8
- 4.6.7
- 4.6.6
- 4.6.5
- 4.6.4
- 4.6.3
- 4.6.2
- 4.6.1
- 4.6.0
- 4.5.11
- 4.5.10
- 4.5.9
- 4.5.8
- 4.5.7
- 4.5.6
- 4.5.5
- 4.5.4
- 4.5.3
- 4.5.2
- 4.5.1
- 4.5.0
- 4.5.0-alpha.6
- 4.5.0-alpha.5
- 4.5.0-alpha.4
- 4.5.0-alpha.3
- 4.5.0-alpha.2
- 4.5.0-alpha.1
- 4.5.0-alpha.0
- 4.4.11
- 4.4.10
- 4.4.9
- 4.4.8
- 4.4.7
- 4.4.6
- 4.4.5
- 4.4.4
- 4.4.3
- 4.4.2
- 4.4.1
- 4.4.0
- 4.4.0-alpha.2
- 4.4.0-alpha.1
- 4.4.0-alpha.0
- 4.3.6
- 4.3.5
- 4.3.4
- 4.3.3
- 4.3.2
- 4.3.1
- 4.3.0
- 4.2.4
- 4.2.3
- 4.2.2
- 4.2.1
- 4.2.0
- 4.1.20
- 4.1.19
- 4.1.18
- 4.1.17
- 4.1.16
- 4.1.15
- 4.1.14
- 4.1.13
- 4.1.12
- 4.1.11
- 4.1.10
- 4.1.9
- 4.1.8
- 4.1.7
- 4.1.6
- 4.1.5
- 4.1.4
- 4.1.3
- 4.1.2
- 4.1.1
- 4.1.0
- 4.0.7
- 4.0.6
- 4.0.5
- 4.0.4
- 4.0.3
- 4.0.2
- 4.0.1
- 4.0.0
- 4.0.0-beta.19
- 4.0.0-beta.18
- 4.0.0-beta.17
- 4.0.0-beta.16
- 4.0.0-beta.15
- 4.0.0-beta.14
- 4.0.0-beta.13
- 4.0.0-beta.12
- 4.0.0-beta.11
- 4.0.0-beta.10
- 4.0.0-beta.9
- 4.0.0-beta.8
- 4.0.0-beta.7
- 4.0.0-beta.6
- 4.0.0-beta.5
- 4.0.0-beta.4
- 4.0.0-beta.3
- 4.0.0-beta.2
- 4.0.0-beta.1
- 4.0.0-beta.0
- 4.0.0-alpha.14
- 4.0.0-alpha.13
- 4.0.0-alpha.12
- 4.0.0-alpha.11
- 4.0.0-alpha.10
- 4.0.0-alpha.9
- 4.0.0-alpha.8
- 4.0.0-alpha.7
- 4.0.0-alpha.6
- 4.0.0-alpha.5
- 4.0.0-alpha.4
- 4.0.0-alpha.3
- 4.0.0-alpha.2
- 4.0.0-alpha.1
- 3.4.15
- 3.4.14
- 3.4.13
- 3.4.12
- 3.4.11
- 3.4.10
- 3.4.9
- 3.4.8
- 3.4.7
- 3.4.6
- 3.4.5
- 3.4.4
- 3.4.3
- 3.4.2
- 3.4.1
- 3.4.0
- 3.3.11
- 3.3.10
- 3.3.9
- 3.3.8
- 3.3.7
- 3.3.6
- 3.3.5
- 3.3.4
- 3.3.3
- 3.3.2
- 3.3.1
- 3.3.0
- 3.2.5
- 3.2.4
- 3.2.3
- 3.2.2
- 3.2.1
- 3.2.0
- 3.1.3
- 3.1.2
- 3.1.1
- 3.1.0
- 3.0.11
- 3.0.10
- 3.0.9
- 3.0.8
- 3.0.7
- 3.0.6
- 3.0.5
- 3.0.4
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 2.2.15
- 2.2.14
- 2.2.13
- 2.2.12
- 2.2.11
- 2.2.10
- 2.2.9
- 2.2.8
- 2.2.7
- 2.2.6
- 2.2.5
- 2.2.4
- 2.2.3
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.7
- 2.1.6
- 2.1.5
- 2.1.4
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.0-beta.11
- 2.1.0-beta.9
- 2.1.0-beta.8
- 2.1.0-beta.7
- 2.1.0-beta.6
- 2.1.0-beta.5
- 2.1.0-beta.4
- 2.1.0-beta.3
- 2.1.0-beta.2
- 2.1.0-beta.1
- 2.1.0-beta.0
- 2.0.9
- 2.0.8
- 2.0.7
- 2.0.6
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 2.0.0-rc.27
- 2.0.0-rc.26
- 2.0.0-rc.25
- 2.0.0-rc.24
- 2.0.0-rc.23
- 2.0.0-rc.22
- 2.0.0-rc.21
- 2.0.0-rc.20
- 2.0.0-rc.19
- 2.0.0-rc.18
- 2.0.0-rc.17
- 2.0.0-rc.16
- 2.0.0-rc.15
- 2.0.0-rc.14
- 2.0.0-rc.13
- 2.0.0-rc.12
- 2.0.0-rc.11
- 2.0.0-rc.10
- 2.0.0-rc.9
- 2.0.0-rc.8
- 2.0.0-rc.7
- 2.0.0-rc.6
- 2.0.0-rc.5
- 2.0.0-rc.4
- 2.0.0-rc.3
- 2.0.0-rc.2
- 2.0.0-rc.1
- 2.0.0-beta.25
- 2.0.0-beta.24
- 2.0.0-beta.23
- 2.0.0-beta.22
- 2.0.0-beta.21
- 2.0.0-beta.20
- 2.0.0-beta.19
- 2.0.0-beta.18
- 2.0.0-beta.17
- 2.0.0-beta.16
- 2.0.0-beta.15
- 2.0.0-beta.14
- 2.0.0-beta.13
- 2.0.0-beta.12
- 2.0.0-beta.11
- 2.0.0-beta.10
- 2.0.0-beta.9
- 2.0.0-beta.8
- 2.0.0-beta.7
- 2.0.0-beta.6
- 2.0.0-beta.5
- 2.0.0-beta.4
- 2.0.0-beta.3
- 2.0.0-beta.2
- 2.0.0-beta.1
- 2.0.0-beta.0
- 1.0.0-beta.11
- 1.0.0-beta.10
- 1.0.0-beta.9
- 1.0.0-beta.8
- 1.0.0-beta.7
- 1.0.0-beta.6
- 1.0.0-beta.5
- 1.0.0-beta.4
- 1.0.0-beta.3
- 1.0.0-beta.2
- 1.0.0-beta.1
- 1.0.0-beta.0
- 0.9.3
- 0.9.2
- 0.9.1
- 0.9.0
Painless Vue forms
Features
- 🍞 Easy: Declarative validation that is familiar and easy to setup
- 🧘♀️ Flexible: Synchronous, Asynchronous, field-level or form-level validation
- ⚡️ Fast: Build faster forms faster with intuitive API and small footprint
- 🏏 Minimal: Only handles the complicated form concerns, gives you full control over everything else
- 😎 UI Agnostic: Works with native HTML elements or your favorite UI library components
- 🦾 Progressive: Works whether you use Vue.js as a progressive enhancement or in a complex setup
- ✅ Built-in Rules: Companion lib with 25+ Rules that covers most needs in most web applications
- 🌐 i18n: 45+ locales for built-in rules contributed by developers from all over the world
Getting Started
Installation
# Install with yarn
yarn add vee-validate
# Install with npm
npm install vee-validate --save
Vue version support
The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table
Usage
vee-validate offers two styles to integrate form validation into your Vue.js apps.
Composition API
The fastest way to create a form and manage its validation, behavior, and values is with the composition API.
Create your form with useForm
and then use defineField
to create your field model and props/attributes and handleSubmit
to use the values and send them to an API.
<script setup>
import { useForm } from 'vee-validate';
// Validation, or use `yup` or `zod`
function required(value) {
return value ? true : 'This field is required';
}
// Create the form
const { defineField, handleSubmit, errors } = useForm({
validationSchema: {
field: required,
},
});
// Define fields
const [field, fieldProps] = defineField('field');
// Submit handler
const onSubmit = handleSubmit(values => {
// Submit to API
console.log(values);
});
</script>
<template>
<form @submit="onSubmit">
<input v-model="field" v-bind="fieldProps" />
<span>{{ errors.field }}</span>
<button>Submit</button>
</form>
</template>
You can do so much more than this, for more info check the composition API documentation.
Declarative Components
Higher-order components can also be used to build forms. Register the Field
and Form
components and create a simple required
validator:
<script setup>
import { Field, Form } from 'vee-validate';
// Validation, or use `yup` or `zod`
function required(value) {
return value ? true : 'This field is required';
}
// Submit handler
function onSubmit(values) {
// Submit to API
console.log(values);
}
</script>
<template>
<Form v-slot="{ errors }" @submit="onSubmit">
<Field name="field" :rules="required" />
<span>{{ errors.field }}</span>
<button>Submit</button>
</Form>
</template>
The Field
component renders an input
of type text
by default but you can control that
📚 Documentation
Read the documentation and demos.
Contributing
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.
Credits
- Inspired by Laravel's validation syntax
- v4 API Inspired by Formik's
- Nested path types by react-hook-form
- Logo by Baianat
Emeriti
Here we honor past contributors and sponsors who have been a major part on this project.