Simple Vue.js Input Validation Plugin – Vee-Validate

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.5.6 (11/16/2021)

• Bug Fixes

v4.5.5 (11/01/2021)

• Fixed an issue where singular checkboxes would be toggled when the form is reset

v4.5.2 (09/30/2021)

• Enhancements

v4.5.1 (09/29/2021)

• Fixed field name not rendering in messages correctly in default error messages

v4.5.0 (09/27/2021)

• Field Arrays
• Invalid Submission Handler

v4.4.11 (09/11/2021)

• Fixed an issue where computed rules triggered validation before the field was explicitly validated (via event trigger or calling validate).

v4.4.10 (08/31/2021)

• Bug Fixes

v4.4.9 (08/05/2021)

• Fixes an issue where initial values were using the same reference as the current values

v4.4.8 (07/21/2021)

• Fixed checkboxes emitting the absent value symbol to bound models when using v-model and not specifying an uncheckedValue

v4.4.7 (07/20/2021)

• Bug Fixes

v4.4.6 (07/08/2021)

• Bug Fixes

v4.4.5 (06/14/2021)

• Fixed null initial values not being respected

v4.4.4 (06/06/2021)

• Fixed: field with pre-register schema errors should be validated on register

v4.4.3 (06/02/2021)

• Fixed bails option being ignored in <Field /> component when using form schema with global rules

v4.4.2 (05/29/2021)

• Clean up form values fields that exchange their name with another field

v4.4.1 (05/24/2021)

• Bring back errors object on the form validation result that was removed by mistake

v4.4.0 (05/24/2021)

• Fixed the URL rule not exported
• Fixed an issue with Field component not emitting onUpdate:modelValue when bound to undefined

v4.3.6 (05/09/2021)

• Added a new way to detect if modelValue was passed as a prop or not

v4.3.5 (05/02/2021)

• Bugfix: priotrize self injections over parent injections closes

v4.3.4 (04/26/2021)

• Ensure the valid flag is updated correctly regardless of the validation intent

v4.3.3 (04/22/2021)

• submitting forms rendered by <Form /> or handleSubmit or submitForm functions, all fields will be automatically “touched”

v4.3.2 (04/21/2021)

• Fixed an issue with the initial value being wrapped in a ref which caused some issues for individual resetField calls and dirty field-level flags

v4.3.1 (04/18/2021)

• Added name to the ErrorMessage component ctor options which should make it identifiable in Vue dev tools
• Tweaked slots rendering for custom components with Field, Form, ErrorMessage component which avoids Vue warning in some situations

v4.3.0 (04/08/2021)

• Computed Validation Schema Support: Previously when working with yup schemas, in particular, it was hard to create a dynamic schema using just the Yup.mixed and Yup.when API, now you can create computed schema to make it easier to do so.
• v-model.number modifier support: TheField component v-model now supports the .number modifier.
• New global rule: The url rule is added back to the global validators, thanks to @davidguilherme who worked on this.
• Several enhancements to the ja locale.

v4.2.4 (03/25/2021)

• Fixed an issue where validation would trigger on value change with useField even if validateOnValueChange is set to false

v4.2.3 (03/22/2021)

• Bug Fixes

v4.2.2 (03/04/2021)

• Fixed an issue for pending validation with fields/forms being unmounted with vue-router
• Added Uyghur locale

v4.2.1 (02/27/2021)

• Fixes some issues introduced in 4.2.1

v4.2.0 (02/24/2021)

• Update and bugfix

v4.1.20 (02/24/2021)

• Fixed nested errors
• Fixed an issue where initial values for checkboxes would cause malformed output

v4.1.19 (02/16/2021)

• A new companion package @vee-validate/zod was published which allows vee-validate to perform field-level and form-level schema validation with Zod as a drop-in replacement for yup

v4.1.18 (02/11/2021)

• Fixed an issue where fields value is set to blank after being switched with another that shares the same name due to a race condition

v4.1.17 (02/09/2021)

• Added a fallback event object detection in case the handler receives a non-standard window.Event instance

v4.1.16 (02/08/2021)

• Fixed global rules not resolving nested field value when targetted by another field

v4.1.14 (02/06/2021)

• Fixed an issue where fields with global rules that includes cross-field validation will ignore the validation triggers

v4.1.13 (02/06/2021)

• Added bn locale

v4.1.12 (01/27/2021)

• Fixed an issue where radio fields in an array were not switching their value correctly when removing previous item

v4.1.11 (01/19/2021)

• Exposed validateField function on the <Form /> slot props and useForm return value, previously it was only available as a composable helper function.

v4.1.10 (01/17/2021)

• Fixed an issue where array fields didn’t preserve their state if another item were added and they weren’t manipulated yet

v4.1.9 (01/13/2021)

• Updated the types to use yup own type information and enhanced the compatibility between generic useForm and object schemas

v4.1.8 (01/13/2021)

• Changed <ErrorMessage />to not render anything when there are no messages for the associated field

v4.1.7 (01/12/2021)

• Exposed a couple of submission types: SubmissionContext, SubmissionHandler

v4.1.6 (01/10/2021)

• Added onSubmit prop on the Form component and added emits option to allow templates to work well with typescript.

v4.1.5 (01/05/2021)

• Fixed an issue caused by the 4.1.4 release where initial values with v-model were not correctly set.

v4.1.4 (01/04/2021)

• fixed an issue where formless checkboxes created with <Field /> component would fail to toggle their associated v-model value

v4.1.3 (01/02/2021)

• Now you can provide a value type to useField

v4.1.2 (12/26/2020)

• added useSubmitForm composition API helper that functions similarly to handleSubmit but with a composition API style.

v4.1.1 (12/19/2020)

• Fixed missing exports for useFieldError and useFormErrors

v4.0.6 (12/15/2020)

• added unchecked-value prop to the <Field /> component to allow creating toggling value fields
• minor performance enhancements for <Field /> and <Form /> components
• bug Fixes

v4.0.5 (12/12/2020)

• Added validateOnInput, validateOnUpdate, validateOnBlur, validateOnModelUpdate props to the Field component to customize validation triggers per field instance

v4.0.4 (12/09/2020)

• added submitCount state to <Form /> and useForm()
• bugs fixed

v4.0.3 (12/05/2020)

• fixed an issue where radio inputs values were stringified

v4.0.2 (12/05/2020)

• fix: regex rule was not working correctly

v4.0.1 (11/25/2020)

• Make sure to pass down native blur and input and change listeners to rendered Field input node

v4.0.0 (11/16/2020)

• Update for Vue.js 3.

v3.4.5 (11/11/2020)

• fixed double rule signature not being compatible with extend TypeScript signature

v3.4.4 (11/08/2020)

• fix: double rule signature not matching closes

v3.4.4 (11/07/2020)

• Disabled observers no longer participate in validation

v3.4.3 (10/22/2020)

• Exposed validateWithInfo on the ValidationObserver scoped slot props

v3.4.2 (10/21/2020)

• Expose validateWithInfo as Observer slot-prop

v3.4.1 (10/11/2020)

• Added double rule to validate decimal numbers with either comma or dot as a seperator

v3.4.0 (09/21/2020)

• Fixed a long standing issue where validation observer validate() method would not sync the errors on the observer instance immediately
• Added validateWithInfo function on the ValidationObserver instance that returns more information about the validation run, it returns an object with isValid, errors, fields, and flags

v3.3.11 (09/11/2020)

• fixed an issue where infinite arguments targetting other fields like excluded would not be mapped to their target values

v3.3.8 (08/01/2020)

• fixed withValidation not preserving wrapped components scoped slots
• i18n updated

v3.3.7 (07/01/2020)

• Bugfix

v3.3.6 (06/27/2020)

• Mark params argument as non-optional as it will always be provided

v3.3.5 (06/20/2020)

• fix: added NaN check for value equality during re-render

v3.3.4 (06/17/2020)

• Updated i18n
• Added image/webp support to the image rule

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

You Might Be Interested In: