VeeValidate 4.0 has been released for Vue 3 🚀
VeeValidate

Getting started

Installation

You can install this plugin via npm or via a CDN.

npm

npm install vee-validate@"<3.0.0" --save

CDN

  <!-- jsdelivr cdn -->
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@<3.0.0/dist/vee-validate.js"></script>

  <!-- unpkg -->
  <script src="https://unpkg.com/vee-validate@<3.0.0"></script>

Usage

TIP

Examples use the ES2015 syntax, make sure to brush up on ES2015 if you haven't already.

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

or include the script directly

  <script src="path/to/vue.js"></script>
  <script src="path/to/vee-validate.js"></script>
  <script>
    Vue.use(VeeValidate); // good to go.
  </script>

Basic Example

All you need is to add the v-validate directive to the input you wish to validate and make sure your input has a name attribute for error messages generation.

Then, pass to the directive a rules string which contains a list of validation rules separated by a pipe '|'. For the following example, the validation rules are straightforward. Use required to indicate that the field is required and email to indicate that the field must be an email. To combine both rules we assign the string value required|email to the v-validate expression value.

<input v-validate="'required|email'" name="email" type="text">

To display the error message we simply use the errors.first method to fetch the first error generated for the field:

<span>{{ errors.first('email') }}</span>

Demo

Here is the basic example in action

More Examples

WARNING

Client-side validation is never a substitute for server-side validation. Make sure to validate any input from the user on your backend as well.

TIP

There are other ways to install the plugin, check them out.

← Syntax →