Overview

Form validation is one of the most difficult subjects in frontend, not only do you have to deal with ensuring correct values are submitted, you must also make sure to provide a suitable UX for your users. We also have to deal with accessibility and making sure our forms are inclusive and usable for all types of our users. Doing form validation by hand is painful, a lot of work, and fairly time consuming! The time you spend working on a custom form validation solution is better spent building your application logic.

Most validation libraries will save you a lot of time, but vee-validate tackles the major pain points of form validation and addresses them in the most flexible way possible:

• Ability to craft complicated UX for your users.
• Most common validations are built-in.
• Cross Field validation.
• Utilities to enhance your forms accessability and styling.
• Localization is built-in the core.

Getting Started

Installation

yarn

yarn add vee-validate@3

npm

npm install vee-validate@3 --save

CDN

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

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

Usage

via script tag

include the script directly

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
  // Add a rule.
  VeeValidate.extend('secret', {
    validate: value => value === 'example',
    message: 'This is not the magic word'
  });

  // Register the component globally.
  Vue.component('ValidationProvider', VeeValidate.ValidationProvider);
</script>

ES6+

import Vue from 'vue';
import { ValidationProvider, extend } from 'vee-validate';

// Add a rule.
extend('secret', {
  validate: value => value === 'example',
  message: 'This is not the magic word'
});

// Register it globally
Vue.component('ValidationProvider', ValidationProvider);

TIP

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

Basic Example

VeeValidate exposes a ValidationProvider component that allows you to validate your fields. To validate, wrap your field with a validation-provider component:

<ValidationProvider rules="secret" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Component Casing

The examples will use Pascal case which should work fine if you are using Vue component files (SFC or .vue files). If you plan to use vee-validate in the browser build, you will need to use the kebab case. The previous example would then be:

<validation-provider rules="secret" v-slot="{ errors }">
  <input v-model="email" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

The rules prop passed to the ValidationProvider is the validation rules that will be checked against the input.

To display error messages, the ValidationProvider exposes errors array through scoped slots, this array contains error messages related to that field.

Demo

Here is the above example in action, enter an even number to pass validation:

<template>
  <ValidationProvider rules="even" v-slot="{ errors }">
    <input v-model="value" type="number" placeholder="type something">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
import { extend } from 'vee-validate';

extend('even', value => {
  return value % 2 === 0;
});

export default {
  data: () => ({
    value: ''
  })
};
</script>