vee-validate
Advanced tools
vee-validate is a form validation library for Vue.js that allows you to validate inputs and forms with ease. It provides a set of validation rules and the ability to create custom rules, making it highly flexible and customizable.
Basic Validation
This example demonstrates basic validation using vee-validate. The input field for email is validated to ensure it is required and follows the email format. Errors are displayed using the `errors.first` method.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { email: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }"
}
Custom Validation Rules
This example shows how to create and use custom validation rules in vee-validate. The custom rule 'unique' checks if the username is not 'admin' and displays an error message if it is.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"username\" name=\"username\" v-validate=\"'required|unique'\" /><span>{{ errors.first('username') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { username: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
"created": "function() { this.$validator.extend('unique', { getMessage: field => `The ${field} is already taken.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'admin' }); }, 500); }) }); }"
}
Validation with Async Rules
This example demonstrates how to use asynchronous validation rules in vee-validate. The custom rule 'is-available' checks if the email is not 'test@example.com' with a simulated delay.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email|is-available'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { email: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
"created": "function() { this.$validator.extend('is-available', { getMessage: field => `The ${field} is not available.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'test@example.com' }); }, 1000); }) }); }"
}
Vuelidate is another popular validation library for Vue.js. It provides a simple and flexible way to validate forms and inputs. Unlike vee-validate, Vuelidate uses a model-based approach, which can be more intuitive for some developers.
Vue Formulate is a powerful form library for Vue.js that includes built-in validation. It offers a wide range of features, including form generation, validation, and custom input components. Compared to vee-validate, Vue Formulate provides a more comprehensive solution for form handling.
Buefy is a lightweight UI component library for Vue.js based on Bulma. It includes form validation features as part of its form components. While not as feature-rich as vee-validate, Buefy provides a good option for developers already using Bulma for styling.
Painless Vue forms
# Install with yarn
yarn add vee-validate
# Install with npm
npm install vee-validate --save
The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table
| vue Version | vee-validate version | Documentation Link |
|---|---|---|
2.x | 2.x or 3.x | v2 or v3 |
3.x | 4.x | v4 |
vee-validate offers two styles to integrate form validation into your Vue.js apps.
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.
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
Read the documentation and demos.
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.
Here we honor past contributors and sponsors who have been a major part on this project.
4.14.3
FAQs
Painless forms for Vue.js
The npm package vee-validate receives a total of 407,616 weekly downloads. As such, vee-validate popularity was classified as popular.
We found that vee-validate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.