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.
vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.
Being template-based you only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated with 40+ locales supported. Many rules are available out of the box.
This plugin is inspired by PHP Framework Laravel's validation.
Since Vue 3.0 was released, vee-validate@v4 targets Vue 3 support with a completely new API. It will not be tagged as latest until Vue is tagged as latest as well.
Currently we are in Alpha releases, to install vee-validate v4 use the next tag:
yarn add vee-validate@next
# or
npm install vee-validate@next
You can find the documentation for v4 here:
https://vee-validate.logaretm.com/v4/
yarn add vee-validate
npm i vee-validate --save
vee-validate is also available on these CDNs:
When using a CDN via script tag, all the exported modules on VeeValidate are available on the VeeValidate Object. ex: VeeValidate.Validator
Install the rules you will use in your app, we will install the required rule for now:
import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
// Add the required rule
extend('required', {
...required,
message: 'This field is required'
});
// Add the email rule
extend('email', {
...email,
message: 'This field must be a valid email'
});
Import the ValidationProvider component and register it:
import { ValidationProvider } from 'vee-validate';
// Register it globally
// main.js or any entry file.
Vue.component('ValidationProvider', ValidationProvider);
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider
}
};
All the JavaScript work is done. Next in the template add the inputs you want to validate them:
<ValidationProvider name="email" rules="required|email">
<div slot-scope="{ errors }">
<input v-model="email">
<p>{{ errors[0] }}</p>
</div>
</ValidationProvider>
The validation provider accepts two props: rules which is in its simplest form, a string containing the validation rules separated by a | character, and a name prop which is the field name that will be used in error messages.
and That's it, your input will be validated automatically, notice that the ValidationProvider uses scoped slots to pass down validation state and results.
There is more that can be done! You can customize events, validate initial values, manually validate or reset the field and much more. Make sure to read the docs.
Read the documentation and demos.
This library uses ES6 Promises so be sure to provide a polyfill for it for the browsers that do not support it.
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.
MIT
FAQs
Painless forms for Vue.js
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.