2.0.0-beta.15

Breaking Changes

• All data-* attributes are now prefixed with vv, looks like data-vv-rules to ensure no conflicts happen in the future.
• validateAll now always returns a promise regardless if you have passed parameters or not, it also doesn't rely on events anymore to trigger validation. however upon failure it is not rejected yet (next release).
• All validators now share a global locale configuration, using the method setLocale that is available both statically and on validator instances will change the locale for all validators since it doesn't make sense to have two validators operating on different locales.
• static setDefaultLocale method has been removed.

New Features

• Error Selectors: you can filter the error message you want to display in both first and has methods by the rule name, for example if you want to display the first error message that is associated with the rule required for the name field you would use: errors.first('name:required');.
• The validation is now also triggered by blur event by default.
• You can specify which events to trigger validation using: data-vv-validate-on="input|blur" which is the default, you may specify custom events or different ones, events are separated by a pipe.
• Custom components can now be validated, but they must emit input event whenever the value changes, further more they should also either have a property called name or have data-vv-name attribute to denote the field name, it should also have data-vv-value-path attribute to denote the internal value state so it can be used with validateAll.
• Confirmed rule does not require the target field name anymore, instead it prefixes _confirmation with the field name unless specified.
• New rules:
  • min_value: compares against a minimum numeric value.
  • max_value: compares against a maximum numeric value.
  • credit_card: validates a credit card number.
• New Locales:
  • Korean.
  • Georgian.
  • Russian.
  • Swedish.
  • Polish.

Full Changelog is here.

2.0.0-beta.14

Breaking Changes

Flags

The flags introduced in the latest version had a major change, due to them using the Proxy object which had a lot of problems in compatibility and behavior as noted #42

Now instead of using accessing the flags like objects fields.name.dirty you have to use the methods available on the fields object like this:

fields.dirty('name'); // is the field 'name' dirty?

All other flags follow suit.

additionally by not providing a field name it will return the flag status for all fields with some logical reasoning:

fields.dirty(); // Is there any field that is dirty (at least one).
fields.clean(); // Are all fields clean.
fields.valid(); // Are all fields valid.
fields.passed(); // Have all fields passed the validation.
fields.failed(); // Has any field failed the validation (at least one).

which should prove useful when validation components, additionally new methods has been added to help you modify the flag status manually:

fields.reset('name'); // resets the name flags to the original status.
fields.reset(); // resets all fields flags to their original status.

fields.setDirty('name'); // sets the dirty flag for the specified field, also modifies the dependent flags like 'clean' 'passed' and 'failed'.
fields.setValid('name'); // sets the valid flag for the specified field, also modifies the dependent flags like 'passed ' and 'failed'.

New Stuff:

Validation Reasoning:

In many scenarios you would want to change the error message depending on the result of the validation, but not all rules are black and white (true and false), sometimes you want to specify a specific reason for failing the validation. validators can now return objects instead of booleans to pass any additional data needed to the message generator, a valid object will look like this:

{
  valid: Boolean, // the validation result.
  data: { // Whatever data you want.
    // ... 
  }
}

The data property will be passed to the function generator for that validator (rule) as the third parameter:

getMessage(field, params, data) {
   // return different messages depending on the data object contents.
};

An example for this would be that your custom validation uses an API to validate the data, like checking the uniqueness of an email within your database, You can include the message in the response and attach in the data object, the message generator will then have access to the returned message from the API.

ES6 dist

A new ES6 build was added, it does not include any babel transpilation nor any Polyfills which should be ideal for those who provide their own polyfills with advanced workflow.

Bugs

• Fixed decimal rule not allowing negative numbers #79.
• Added translation support for confirmed target field names #46. (Still does not support data-as attribute).
• Re-added the polyfill for Object.assign method.

1.0.0-beta.9

Breaking Changes

Flags

The flags introduced in the latest version had a major change, due to them using the Proxy object which had a lot of problems in compatibility and behavior as noted #42

Now instead of using accessing the flags like objects fields.name.dirty you have to use the methods available on the fields object like this:

fields.dirty('name'); // is the field 'name' dirty?

All other flags follow suit.

additionally by not providing a field name it will return the flag status for all fields with some logical reasoning:

fields.dirty(); // Is there any field that is dirty (at least one).
fields.clean(); // Are all fields clean.
fields.valid(); // Are all fields valid.
fields.passed(); // Have all fields passed the validation.
fields.failed(); // Has any field failed the validation (at least one).

which should prove useful when validation components, additionally new methods has been added to help you modify the flag status manually:

fields.reset('name'); // resets the name flags to the original status.
fields.reset(); // resets all fields flags to their original status.

fields.setDirty('name'); // sets the dirty flag for the specified field, also modifies the dependent flags like 'clean' 'passed' and 'failed'.
fields.setValid('name'); // sets the valid flag for the specified field, also modifies the dependent flags like 'passed ' and 'failed'.

New Stuff:

Validation Reasoning:

In many scenarios you would want to change the error message depending on the result of the validation, but not all rules are black and white (true and false), sometimes you want to specify a specific reason for failing the validation. validators can now return objects instead of booleans to pass any additional data needed to the message generator, a valid object will look like this:

{
  valid: Boolean, // the validation result.
  data: { // Whatever data you want.
    // ... 
  }
}

The data property will be passed to the function generator for that validator (rule) as the third parameter:

getMessage(field, params, data) {
   // return different messages depending on the data object contents.
};

An example for this would be that your custom validation uses an API to validate the data, like checking the uniqueness of an email within your database, You can include the message in the response and attach in the data object, the message generator will then have access to the returned message from the API.

ES6 dist

A new ES6 build was added, it does not include any babel transpilation nor any Polyfills which should be ideal for those who provide their own polyfills with advanced workflow.

Bugs

• Fixed decimal rule not allowing negative numbers #79.
• Added translation support for confirmed target field names #46. (Still does not support data-as attribute).
• Re-added the polyfill for Object.assign method.

Flags

This is a rather large release for this package, First off, thanks to some amazing people we got many new locales for messages, checkout the dist directory for all available locales.

Flags (New):

Added field flags, which should help you implement a better experience for your users, the available flags are:

• dirty.
• valid.
• clean (is not dirty).
• passed (is dirty and valid).
• failed (is dirty and not valid).

Pretty much like errors, the fields are being stored in a custom FieldBag object, which is transparent to you. you only have to deal with a normal object. you will notice that the fields object is computed in v 2.x while in v 1.x it is a data object, that's because I faced some issues while implementing the v 1.x version due to my own lack of knowledge about the reactivity in Vue. help is appreciated.

You can access the flags like this:

this.fields.{fieldName}.{flag}

or you can check a working example here.

Checkboxes and Radio Buttons Support

Support was added for the check boxes and the radio buttons inputs, if you have a group of inputs you only have to apply the directive on one of them, like this:

<div class="radio buttons">
  <input v-validate data-rules="required|in:1,2" type="radio" name="somevalue" value="1">Radio 1
  <input type="radio" name="somevalue" value="2">Radio 2
  <input type="radio" name="somevalue" value="3">Radio 3
  <span class="error" v-show="fields.somevalue.failed">{{ errors.first('somevalue') }}</span>
</div>

Regex rule

Regex rule had an issue where you can't use pipes within your regular expressions, while it is still the same when specifying the rule in the HTML, but now you can pass objects instead of strings as a validation expression like this:

const v = new Validator();

v.attach('field', [
    { name: 'required' },
    { name: 'regex', params: [/.(js|ts)$/] }
]); // this object form is actually how the validator stores the validations for each field.

Docs update

The documentation is going through a lot of changes, I changed the CSS framework to bulma as well as trying to have a better navigation experience, new examples should be up us well when the documentation site is updated, should take few days.

Issues fixed:

• Spacing Issue #31
• Email validation tweak #33 by @aljaydavids
• New flags fixes #37 and #32

Known Issues:

• Flags do not play well with scopes, fields with the same name within the same Vue instance will conflict with each other.

Flags

This is a rather large release for this package, First off, thanks to some amazing people we got many new locales for messages, checkout the dist directory for all available locales.

Flags (New):

Added field flags, which should help you implement a better experience for your users, the available flags are:

• dirty.
• valid.
• clean (is not dirty).
• passed (is dirty and valid).
• failed (is dirty and not valid).

Pretty much like errors, the fields are being stored in a custom FieldBag object, which is transparent to you. you only have to deal with a normal object. you will notice that the fields object is computed in v 2.x while in v 1.x it is a data object, that's because I faced some issues while implementing the v 1.x version due to my own lack of knowledge about the reactivity in Vue. help is appreciated.

You can access the flags like this:

this.fields.{fieldName}.{flag}

or you can check a working example here.

Checkboxes and Radio Buttons Support

Support was added for the check boxes and the radio buttons inputs, if you have a group of inputs you only have to apply the directive on one of them, like this:

<div class="radio buttons">
  <input v-validate data-rules="required|in:1,2" type="radio" name="somevalue" value="1">Radio 1
  <input type="radio" name="somevalue" value="2">Radio 2
  <input type="radio" name="somevalue" value="3">Radio 3
  <span class="error" v-show="fields.somevalue.failed">{{ errors.first('somevalue') }}</span>
</div>

Regex rule

Regex rule had an issue where you can't use pipes within your regular expressions, while it is still the same when specifying the rule in the HTML, but now you can pass objects instead of strings as a validation expression like this:

const v = new Validator();

v.attach('field', [
    { name: 'required' },
    { name: 'regex', params: [/.(js|ts)$/] }
]); // this object form is actually how the validator stores the validations for each field.

Docs update

The documentation is going through a lot of changes, I changed the CSS framework to bulma as well as trying to have a better navigation experience, new examples should be up us well when the documentation site is updated, should take few days.

Issues fixed:

• Spacing Issue #31
• Email validation tweak #33 by @aljaydavids
• New flags fixes #37 and #32

Known Issues:

• Flags do not play well with scopes, fields with the same name within the same Vue instance will conflict with each other.

2.0.0-beta.12

Project Changes:

• Switched from Webpack to Rollup.js for better bundle sizes and cleaner bundle style.
• Refactored the src/directive.js file to be a lot cleaner, there is a seperate module that handles attaching listeners in src/listeners.js.

General Changes:

• Some polyfills are not longer included in the build for better sizes, typically you already use polyfills in your projects.
• Added support for radio inputs validation mentioned here #20 checkboxes still pending.

Fixes:

• Fixed an issue where triggering validation for a specific scope would have a side effect on other scopes.
• Fixed an issue where vee-validate would fail in IE because of Object.assign and provided a basic polyfill.

1.0.0-beta.7

Project Changes:

• Switched from Webpack to Rollup.js for better bundle sizes and cleaner bundle style.
• Refactored the src/directive.js file to be a lot cleaner, there is a seperate module that handles attaching listeners in src/listeners.js.

General Changes:

• Some polyfills are not longer included in the build for better sizes, typically you already use polyfills in your projects.
• Added support for radio inputs validation mentioned here #20 checkboxes still pending.

Fixes:

• Fixed an issue where triggering validation for a specific scope would have a side effect on other scopes.
• Fixed an issue where vee-validate would fail in IE because of Object.assign and provided a basic polyfill.

2.0.0-beta.11

Documentation was removed from this repository in favor of a standalone repository here, which is accessible via this link

The reason was that too many commits were associated with the docs, also since the docs were being served from the next branch it caused sync issues with the master branch.

The new documentation uses vue-router for better performance and rendering and proper production setup.

All links have been updated reflecting this change.

1.0.0-beta.6

Documentation was removed from this repository in favor of a standalone repository here, which is accessible via this link

The reason was that too many commits were associated with the docs, also since the docs were being served from the next branch it caused sync issues with the master branch.

The new documentation uses vue-router for better performance and rendering and proper production setup.

All links have been updated reflecting this change.

2.0.0-beta.10

Fix a bug where an input couldn't find its scope if it is not a child of a form, causing the plugin to crash.