hero

VeeValidate

Template Based Validation Framework for Vue.js

Get Started →

Simple

Template based validation that is both familiar and easy to setup.

Flexible

Validate HTML inputs and Vue components, generate localized errors, Extendable, It does it all.

Configurable

Config that doesn't get into your way, everything is optional.

Version

This is the docs for vee-validate 3.x. You access the docs for the old version 2.x from here.

Quick Setup

VeeValidate is a validation framework that offers validation for your fields using components and scoped slots.

Installation

# install with npm
npm install vee-validate

# install with yarn
yarn add vee-validate

Usage

Register the ValidationProvider component and add the required rule:

 
 

 
 
 
 




 






import { ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'The {_field_} field is required'
});

new Vue({
  el: '#app',
  components: {
    ValidationProvider
  },
  data: () => ({
    value: ''
  })
});

Wrap your inputs with the ValidationProvider:

 


 

<validation-provider rules="required" v-slot="{ errors }">
  <input v-model="value" name="myinput" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

And this is the result:

Contributions

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]