VeeValidate Logo

VeeValidate

Simple Vuejs Input Validation

What is vee-validate?

This is a plugin for Vue.js that allows you to validate input fields, and display errors, in an easy and powerful way.

You don't have to do anything fancy in your app: Most of the work goes into the html. You only need to specify, for each input, what kind of validators should be used when the value changes. You will then get informed of the errors for each field.

Although most of the validations occur automatically, you can use the validator however you see fit. The validator object has no dependencies and is a standalone object.

Currently there are over 20 validation rules available in the plugin. This plugin is inspired by PHP Framework Laravel's validation syntax.

Installation

You can install this plugin via npm or via a CDN.

npm

npm install vee-validate --save

CDN

  <script src="path/to/vue.js"></script>
  <script src="path/to/vee-validate.js"></script>
  <script>
    Vue.use(VeeValidate); // good to go. 
  </script>

or you may import it using ES6:

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

Vue.use(VeeValidate);

Basic Example

All you need is to add the v-validate directive to the input you wish to validate.

Then, pass to the directive a rules string which contains a list of validation rules separated by a pipe '|'. For the following example the validation rules are straight forward. Use required to indicate that the field is required, and email to indicate that the field must be an email. To combine both rules we assign the string value required|email to the v-validate expression value.

export default { name: 'basic-example' };
<div class="column is-12"> <label class="label" for="email">Email</label> <p :class="{ 'control': true }"> <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email"> <span v-show="errors.has('email')" class="help is-danger">{{"{" + "{ errors.first('email') }" + "}"}}</span> </p> </div>

The field must always have either a name or a data-vv-name attribute, either of which act as the identifier for that input. The name attribute takes precedence. However the name that appears in the error messages can be customized using the data-vv-as attribute or it can use the dictionary object

Rendering Errors

Naturally, you would want to display the errors to your users. The plugin augments your Vue instance with a private validator object and a public errors data object. You are responsible for how the errors should be rendered.

The errors object exposes simple methods to help you render errors:

  • first('field') Fetches the first error message associated with that field.
  • collect('field') Fetches all error messages associated with that field. Alternatively you can pass nothing and it will return errors grouped by fields.
  • has('field') Checks if there are any errors associated with that field.
  • all() Gets all error messages.
  • any() Checks if there are any errors.

There are a few more methods that you can use to manipulate the errors object.

Available Rules

There are more than 20 rules available to validate your inputs:

Visit the rules documentation to learn more about how to use each rule and how to create your own.

Configuration

You may need to configure some options to tweak some of the plugin internals. This is not required, but could cause conflicts. For example, using a property called errors on your vue instance may cause conflicts. Here is how you would set up the options, along with the default values:

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

const config = {
  errorBagName: 'errors', // change if property conflicts
  fieldsBagName: 'fields', 
  delay: 0, 
  locale: 'en', 
  dictionary: null, 
  strict: true, 
  classes: false, 
  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'valid', // model is valid
    invalid: 'invalid', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  },
  events: 'input|blur',
  inject: true,
  validity: false,
  aria: true
};

Vue.use(VeeValidate, config);
Config Name Default Description
errorBagName errors The name of the `ErrorBag` object that will be injected in each of Vue's instances' data.
fieldsBagName fields The name of the Fields (flags) object that will be injected in each of Vue's instances' data.
delay 0 The default debounce time for all inputs (only affects validations).
locale en The default language for the validation messages.
dictionary null A dictionary to be merged with the validators dictionary. (Check the [custom messages](rules.html#custom-messages) and [localization](localization.html) sections.)
strict true Fields that have no rules will fail validation unless `strict` is set to false.
classes false Applies automatic classes on inputs or components root elements being validated.
classNames { touched: 'touched', // the control has been blurred untouched: 'untouched', // the control hasn't been blurred valid: 'valid', // model is valid invalid: 'invalid', // model is not valid pristine: 'pristine', // control has not been interacted with dirty: 'dirty' // control has been interacted with } The classes to be applied depending on the state of the input.
events input|blur Pipe separated list of the default event names that will be listened to, to trigger validation. If an empty string is provided it will disable all listeners.
inject true Specifies if a validator instance should be injected automatically for all components. (See [Component Injections](advanced#injections) for more information.)
validity false Set custom validity (Constraint validation)[https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation] on native HTML inputs.
aria true Sets `aria-invalid` and `aria-required` on native HTML inputs.