Vee Validate

ErrorBag

The ErrorBag class is a wrapper around an array, and is standalone and has no dependencies, you can use it in your code for any reason: import { ErrorBag } from 'vee-validate'; // ES6 Import. const bag = new ErrorBag(); The internal array contains the error objects, the structure is: { errors: [ { field: 'Field name', msg: 'Error message' }, { field: 'Field name', msg: 'Error message' }, { field: 'Field name', msg: 'Error message' } ] }

Available Methods:

add(object error) adds an error object to the internal array.
all() Gets all messages from the internal array.
any() Checks if there are any errors.
clear() Removes all items from the internal array.
collect(String field) Collects errors associated with a specific field. not passing the field name will group all errors by field name instead.
count() Gets the length of the internal array. or the number of messages.
first(String field) Gets the first error message associated with the specified field.
has(String field) Checks if there is at least one error associated with the specified field.
remove(String field) Removes all errors for a specified field from the internal array.

Validator

The validator is injected to the Vue instance as $validator automatically. However it is also a stand alone class and can be used separately for programmatically validating values. The constructor can optionally take an object to map each field name to a set of validations. import { Validator } from 'vee-validate'; const validator = new Validator({ email: 'required|email', name: 'required|alpha|min:3', }); // or Validator.create({ ... }); But you can construct the object without passing anything and add the validation rules later. import { Validator } from 'vee-validate'; const validator = new Validator(); validator.attach('email', 'required|email'); // attach field. validator.attach('name', 'required|alpha', 'Full Name'); // attach field with display name for error generation. validator.detach('email'); // you can also detach fields. After that you can validate values with validate(field, value) which should returna boolean if all validations pass. like this: validator.validate('email', 'foo@bar.com'); // true validator.validate('email', 'foo@bar'); // false

Note: Most validators return a Boolean, however some validators (very few) return a Promise The validator is aware of this and will only return a Promise if at least one validation yields a promise. the promise is resolved to boolean which you can later chain to check your fields.

You Can validate multiple values at the same time using validateAll(obj): validator.validateAll({ email: 'foo@bar.com', name: 'John Snow' }); Returns true if all values passed validation, false if at least one value failed validation. will return a Promise if at least one field validation rule returned a Promise which is also resolved to a boolean. The ErrorBag will be populated with any errors encountered. You can access the errorBag property directly or using getErrors(). var errorBag = validator.errorBag; // or var errorBag = validator.getErrors(); The validator instance can only generate messages for one locale at a time. But you need to use setLocale method to switch the validator locale. validator.setLocale('ar');

Note: Each validator keeps track of its own locale. so be sure to update any instances whenever the language changes. For more information about how to overwrite messages and add new ones, please refer to the custom messages section.

The Validator class has a static method called setDefaultLocale(string) which sets the default language for all newly instantiated validators to that language. import { Validator } from 'vee-validate'; Validator.setDefaultLocale('ar'); // from now on, all validators that are created will have this locale. Validator.create().locale // 'ar'; Validator.setDefaultLocale(); // resets to english, again for all newly created validators, previously created ones won't be touched.

Validator Example

Here is an example of using the validator without the directive, which means you will be responsible for monitoring input changes on your own, and calling the API methods as you see fit. This example uses a Vue instance to simplify things, but it can be used in plain JavaScript as well.