Simple Vue.js Input Validation Plugin - Vee-Validate

Install & Download:

# Yarn
$ yarn add vee-validate@next
# NPM
$ npm i vee-validate@next --save

Description:

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.12.5 (01/29/2024)

Bugfixes

v4.12.4 (12/27/2023)

Check if both source and target objects are POJOs before attempting to merge them

v4.12.3 (12/14/2023)

use spec object instead of checking tests for determining the required status of a field on yup schemas
Remove deep data mutation warning
Allow path meta querying for nested fields
Expose some state on form instance

v4.12.2 (11/28/2023)

Bugfixes

v4.12.0 (11/26/2023)

Deprecated reactive initial values
Added defineField API
Added support for meta.required state for Typed Schemas only.
DX improvements
Bug Fixes

v4.11.8 (10/06/2023)

(perf) Avoid triggering extra model value events
Allow null as a valid Form prop type

v4.11.7 (08/22/2023)

Removed default export from the @vee-validate/rules package which caused issues for ESM importing
useSetFormValues now accepts values generic type parameters
Exported missing internal types causing a build error
Added Joi schema support , it was sneaked in a previous release tag but it is being announced here to acknowledge that addition.
Valibot and Yup schemas now merge their default values with the initial form values, allowing you to use each lib’s schema defaults more freely

v4.11.6 (08/22/2023)

Bugfix

v4.11.3 (08/22/2023)

updates valibot support to v0.13.0 and replaces the usage of deprecated API methods

v4.11.2 (08/20/2023)

You can now query fields meta state using isFieldTouched, isFieldDirty, and isFieldValid helpers on useForm.
Bug Fixes

v4.11.0 (07/30/2023)

Added composition functions to set field and form values, meta, and errors from their child components.

v4.10.8 (07/22/2023)

Improve setFieldError and setFieldValue performance

v4.10.7 (07/16/2023)

Bugfixes

v4.10.6 (07/08/2023)

Bugfixes
use silent validation when field is initialized

v4.10.5 (07/04/2023)

Bugfixes

v4.10.3 (06/29/2023)

Bugfixes

v4.10.2 (06/25/2023)

Bugfix: defineXXXBinds not respecting validation config events

v4.10.1 (06/23/2023)

Bugfixes

v4.10.0 (06/23/2023)

Disabled syncVModel by default
useForm#values is now readonly
Allow custom models for defineComponentBinds
handleBlur can be configured to run validations
useField#syncVModel also accepts the model prop name
Allow multiple messages to be returned in a validator function
Bug Fixes

v4.9.6 (05/31/2023)

Bugfixes

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)