Simple Vue.js Input Validation Plugin – Vee-Validate

vee-validate is a lightweight plugin for Vue.js that allows you to validate input fields, and display errors.

Easy, fast, flexible, progressive enhancement, and multiple languages. Compatible with Vue 3 and Vue 2.

Basic Usage

1. Import and register the Field and Form components.

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

export default {
  components: {
    Field,
    Form,
  },
  // ...
};

2. Apply a basic Require validator to a form field.

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />
  <span>{{ errors.field }}</span>
</Form>

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};

3. You can also use the following composition functions to validate the form.

import { useField } from 'vee-validate';

export default {
  setup() {
    function isRequired(value) {
      if (value && value.trim()) {
        return true;
      }
      return 'This is required';
    }
    const { errorMessage, value } = useField('fieldName', isRequired);
    return {
      errorMessage,
      value,
    };
  },
};

<template>
  <div>
    <input v-model="value" type="text" />
    <span>{{ errorMessage }}</span>
  </div>
</template>

// form-level validation
import { useForm, useField } from 'vee-validate';

export default {
  setup() {
    // Define a validation schema
    const simpleSchema = {
      email(value) {
        // validate email value and return messages...
      },
      name(value) {
        // validate name value and return messages...
      },
    };
    // Create a form context with the validation schema
    useForm({
      validationSchema: simpleSchema,
    });
    // No need to define rules for fields
    const { value: email, errorMessage: emailError } = useField('email');
    const { value: password, errorMessage: passwordError } = useField('password');
    return {
      email,
      emailError,
      password,
      passwordError,
    };
  },
};

<template>
  <div>
    <input name="email" v-model="email" />
    <span>{{ emailError }}</span>
    <input name="password" v-model="password" type="password" />
    <span>{{ passwordError }}</span>
  </div>
</template>

Preview:

Changelog:

v4.9.4 (05/17/2023)

• Bugfixes

v4.9.3 (05/10/2023)

• Bugfixes
• Added isValidating on the form context

v4.9.2 (05/09/2023)

• Bugfixes

v4.9.1 (05/08/2023)

• Bugfixes

v4.9.0 (05/07/2023)

• useForm now exposes a new helper defineComponentBinds which allows you to create bindable objects for your components.
• Another helper exposed by useForm is defineInputBinds which allows you to create bindable objects for your HTML elements.
• setValues was deleting the other values not specified, now it only sets the fields partially as provided without deleting any values.
• If you were using a field’s meta with group fields (checkboxes/radio), each field had its own meta, with this release all those fields will have the exact same meta values.
• Validations are now run only when a value setter has been triggered, this should not break anything but if you were using nested values as field values you will get a warning and which alternative to use.
• Bug Fixes

v4.8.6 (04/16/2023)

• Published the offical vee-validate nuxt module

v4.8.5 (04/15/2023)

• Bugfixes

v4.8.4 (03/23/2023)

• Bugfixes

v4.8.2 (03/15/2023)

• Bugfixes

v4.8.1 (03/12/2023)

• You can now infer the input/output types from yup and zod validation schemas by using toTypedSchema helper from @vee-validate/yup and @vee-validate/zod packages.

v4.8.0 (03/12/2023)

• Bugfixes

v4.7.4 (02/06/2023)

• Added new resetField on useForm and <Form /> component slot props
• Exposed getValues and getErrors and getMeta on <Form /> component instance
• Exposed various types from the @vee-validate/i18n module
• Fixed an issue where unique field/rule special messages didn’t work when a label was provided
• ext rule using incorrect wildcard symbol

v4.7.3 (11/12/2022)

• Bugfixed

v4.7.2 (11/01/2022)

• Bugfixed

v4.7.1 (10/22/2022)

• Bugfixed

v4.7.0 (10/09/2022)

• Add Controlled values filtering
• Explicit form context option

v4.6.10 (09/29/2022)

• Fixed using File constructor while in SSR

v4.6.9 (09/19/2022)

• Fixed an issue where resetForm would leave behind null or undefined in array fields after reset

v4.6.8 (09/19/2022)

• Bugfixes

v4.6.7 (08/28/2022)

• Fixed an issue with async function validators not respecting the last run error messages

v4.6.6 (08/16/2022)

• Fixed emitted value when there are no model modifiers defined

v4.6.5 (08/11/2022)

• Fixed an issue where checkboxes bound to an object could fail unchecking
• Fixed an issue with field’s meta.dirty not being set correctly after calling resetField with a new value

v4.6.4 (08/07/2022)

• Fixed an issue where useFieldModel did not trigger validation for nested paths

v4.6.3 (08/06/2022)

• Avoid toggling field array checkboxes values when an item is removed

v4.6.2 (07/17/2022)

• Expose FieldOptions and FormOptions interfaces
• Avoid toggling field array checkboxes values when an item is removed

v4.6.1 (07/17/2022)

• Pass onInvalidSubmit prop to submitForm

v4.6.0 (07/11/2022)

• v-model with FieldArray API
• Keep values after fields are unmounted
• useFieldModel API
• Automatic v-model events with useField
• Added move() to FieldArray
• If you are using a native <input type=”file”> element its value will now respect the multiple attribute, if it is present and set to true then it will be an array of files. Otherwise, it will be a single file. This could be a breaking change for some.

v4.5.11 (04/10/2022)

• Fixed: Ignored validation of fields during unmounting

v4.5.10 (03/08/2022)

• Fixed an issue with da.json locale which caused the JSON file to not parse correctly

Download Details:

Author: logaretm

Live Demo: https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio

Download Link: https://github.com/logaretm/vee-validate/archive/master.zip

Official Website: https://github.com/logaretm/vee-validate

Install & Download:

# Yarn
$ yarn add [email protected]

# NPM
$ npm i [email protected] --save