vee-validate 2.0.0-rc.8

on Node.js NPM

This release does not contain any major breaking changes, and the validation pipeline and structure has been rewritten.

🐛 Fixed

• Fixed issues that caused the validator no to detect inputs when being inserted in a slot #631.
• Fixed issue that prevented validateAll from detecting input values when executed for the first time.
• Added $attrs detection as a fallback if the component has inheritAttrs set to false (Vuetify) #653 #651.
• Some Issues with early exit has been resolved #660 Thanks @OmerZfira
• Fixed an issue where detached fields using v-if or v-for would still have their messages stuck in the errorBag.
• Fixed an issue where field alias using data-vv-as detection was unreliable with custom components.
• Fixed a long standing issue where the component had a name attribute but wasn't added as a prop (only works in Vue 2.4).

✨ Enhancements

New way to identify fields (Internal):

Most problems originated from not being able to identify a field correctly during the life cycle of the components because the name and the scope of a field are not enough to identify it correctly at any given moment. So fields have been given a unique id to be the main way to identify fields internally.

You don't have to change anything as this is not a breaking change, but if you were using the validator manually you should take the following into consideration:

The attach method now accepts an object as its only parameter, and returns a field object which can be later used to validate the field using its id.

const field = validator.attach(options); // add the field.
validator.validate('#' + field.id); // validate the field by id, no need to pass the value as it will be resolved.

The old signatures are still being supported, but it is recommended that you switch to the new API, before futurue deprecation.

Field Targeting.

Added the ability to provide custom selectors when targeting target fields for confirmed, after, and before rules, which now support using a selector or a Vue ref which allows to target a component:

• confirmed:$pass tries to resolve a field that is registered in $refs of the context component. (recommended)
• confirmed:#pass Tries to resolve a field which its id is pass.
• confirmed:.pass tries to resolve a field which has a pass class.
• confirmed:pass Tries to resolve a field which its name is pass.

Note that selectors will only look inside the context vm template, and will not expand to the entire DOM nor the parent components, so make sure to keep your related inputs within the same component. Here is an example for custom components.

General

• touched and untouched flags are now set on blur instead of focus to match behavior already established by other libraries.
• Calling validate without any parameters is the same as calling validateAll.
• Most built in rules have been updated to be able to work with arrays, if you pass an array as a value each item will be validated against the pipeline.

Minor Changes

General

Few internal property names has been updated, while these changes can be breaking for some rare cases:

• ErrorBag.errors property will be renamed to items since errors.errors feels silly 🥇.
• Validator.errorBag property will be renamed to Validator.errors.
• EnableAutoClasses option has been renamed to classes.

Deprecated Methods ❗️

• Validator's instance append method has been deprecated.
• Validator's instance updateField method has been deprecated.
• Validator's instance attach method signature was updated, it now accepts a field options object, it still supports the old signature but you should switch to the new signature after merge.
• Some Validator's internal API methods have been deprecated, they were not designed to be called by users anyways.
• reject modifier has been deprecated since it should be the responsibility of the app to decide what to do after failed validation.
• ErrorBag's add method signature now accepts an object as its sole parameter, the object should contain the field, msg, rule and scope attributes that were previously passed in as parameters, in addition to id property which is the field id.