✔ Template Based Validation Framework for Vue.js

Last update: Sep 1, 2019

codecov Build Status Codacy Badge CDNJS npm npm Average time to resolve an issue Percentage of issues still open


vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.

Being template-based you only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated with 40+ locales supported. Many rules are available out of the box.

This plugin is inspired by PHP Framework Laravel's validation.

Installation

yarn

yarn add vee-validate

npm

npm i vee-validate --save

CDN

vee-validate is also available on these CDNs:

When using a CDN via script tag, all the exported modules on VeeValidate are available on the VeeValidate Object. ex: VeeValidate.Validator

Getting Started

In your script entry point:

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

Now you are all setup to use the plugin.

Usage

There are two ways to use vee-validate:

Using Components (recommended)

This is available in 2.1 onwards.

Import the ValidationProvider component and register it:

import { ValidationProvider } from 'vee-validate';

// Register it globally
// main.js or any entry file.
Vue.component('ValidationProvider', ValidationProvider);


// or register it locally in a component
// mycomponent.vue
export default {
  components: {
    ValidationProvider
  }
};

All the JavaScript work is done. Next in the template add the inputs you want to validate them:

{{ errors[0] }}

">
<ValidationProvider name="email" rules="required|email">
  <div slot-scope="{ errors }">
    <input v-model="email">
    <p>{{ errors[0] }}p>
  div>
ValidationProvider>

The validation provider accepts two props: rules which is in its simplest form, a string containing the validation rules separated by a | character, and a name prop which is the field name that will be used in error messages.

and That's it, your input will be validated automatically, notice that the ValidationProvider uses scoped slots to pass down validation state and results.

There is more that can be done! You can customize events, validate initial values, manually validate or reset the field and much more. Make sure to read the docs.

Using directive

Apply the v-validate directive on your input and pass a string value which is a list of validations separated by a pipe. For example, we will use the required and the email validators:

">
<input v-validate="'required|email'" type="text" name="email">

Now every time the input changes, the validator will run the list of validations from left to right, populating the errors helper object whenever an input fails validation.

To access the errors object (in your vue instance):

this.$validator.errorBag;
// or
this.errors; // injected into $data by the plugin, you can customize the property name.

Let's display the error for the email input we've created:

{{ errors.first('email') }}">

<span v-show="errors.has('email')">{{ errors.first('email') }}span>

Documentation

Read the documentation and demos.

Compatibility

This library uses ES6 Promises so be sure to provide a polyfill for it for the browsers that do not support it.

Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

Tutorials and Examples

Articles

Credits

license

MIT

GitHub

https://github.com/atrujillofalcon/vee-validate-liferay
You might also like...

Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jul 30, 2020

Form validation for Vue.js 2.2+

vue-form Form validation for Vue.js 2.2+ Install Available through npm as vue-form. import VueForm from 'vue-form'; // or var VueForm = require('vue-f

Apr 18, 2022

Simple package to display error in vue from laravel validation

Laravel Vue Validator By bubbleflat.com This package allow to display errors from laravel validation rules ! This package needs vue-resource to work !

Sep 20, 2020

Vue form components with server-side validation in mind

Vue form components with server-side validation in mind

Vue form components with server side validation in mind About FormVuelar is a set of predefined vue form components which are designed to automaticall

Jun 12, 2022

A simple way to handle Laravel back-end validation in Vue 2.

A simple way to handle Laravel back-end validation in Vue 2.

vform A simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark. Installation npm i axios vform Usage See the included ex

Jul 1, 2022

Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. 🌌 Written in TypeScript 🌊 Dynamic Form support 🍂 Light wei

May 11, 2022

Input with validation component for Vue 2.x

Input with validation component for Vue 2.x

vue-validation-input This is just a simple extension to the default input element which shows an SVG icon if valid or not. Screenshot Installation $ n

Jan 31, 2022

Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Jan 14, 2022

A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Apr 13, 2022
Comments
Vue data validation rules, very much inspired from Laravel validation

A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system. Installation npm i @primitivesocia

Apr 13, 2022
Vue props validation logic extracted for nested validation in object and arrays.

vue-props-validation Vue props validation logic extracted for nested validation in object and arrays. Install npm install vue-props-validation Usage Y

Feb 28, 2022
Form Validation in Vue3 with TypeScript along with vuelidate for the validation

Vue3 with typescript Form Validation in Vue3 with vuelidate library Node Version Used: v14.17.3 Library Used for the validation: Vuelidate 2 Demo Link

May 21, 2022
Sirius Validation - stand-alone JS library for data validation in Node and browsers.

SiriusJS Validation Sirius Validation is stand-alone JS library for data validation in Node and browsers. It offers: 23 build-in validation rules. The

Mar 24, 2020
Simple, lightweight, isomorphic, and template-based validation library.

Simple, lightweight, isomorphic, template-based validation.

Dec 9, 2021
Simple, lightweight model-based validation for Vue.js
Simple, lightweight model-based validation for Vue.js

vuelidate Simple, lightweight model-based validation for Vue.js Sponsors Gold Silver Bronze Features & characteristics: Model based Decoupled from tem

Jun 25, 2022
Simple, lightweight model-based validation for Vue.js
Simple, lightweight model-based validation for Vue.js

Simple, lightweight model-based validation for Vue.js

Jun 25, 2022
Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

May 7, 2019
✅ Form Validation for Vue.js
✅  Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Jul 4, 2022
RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Feb 3, 2022