Overview

Form validation is one of the most difficult subjects in frontend, not only you have to deal with ensuring correct values are submitted, you must also make sure to provide a pleasant UX for your users and 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 and is a lot of work and you won't probably cover all your needs if you decide to build your own.

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 a very flexible way:

Getting Started

vee-validate primarily makes use of higher-order components to validate your fields, in the next examples you will find Field, Form and ErrorMessage components being used, don't worry about them for now as they are documented extensively later on.

Using a script tag

You can use vee-validate with a script tag and a CDN, import the library like this:

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

This will inject VeeValidate global object, which you will use to access the various components, functions exposed by vee-validate.

Here is a basic example with vee-validate:

See the Pen Basic Example by Abdelrahman Awad (@logaretm) on CodePen.

Using NPM

For a more modern workflow with a bundler, you can install vee-validate using a package manager like yarn or npm:

yarn add vee-validate@next

npm i vee-validate@next --save

Then you can import the various components from vee-validate:

<template>
  <Form v-slot="{ errors }">
    <Field name="field" as="input" :rules="isRequired" />

    <span>{{ errors.field }}</span>
  </Form>
</template>

<script>
import { Field, Form } from 'vee-validate';

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    // Validator function
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};
</script>