vee-validate 2.2.0

on Node.js NPM

VeeValidate 2.2 is out 🎉 with many improvements and fixes!

Major changes

• Due to issues with firefox date-fns parsing. The format has been changed, you can read the details of the date-format system from here.

• ValidationProvider and ValidationObserver are no longer renderless, this is due to Vue not allowing multiple root nodes which when combined with v-slot introduced in 2.6 would happen more often. Now they both render a span by default and that can be customized with tag prop (#1924)

New Features

Interaction Modes #1911

(only available for ValidationProvider)

The ability to specify an interaction mode as formalized by simple-vue-validator. This will replace the events option in the future.

There are 4 modes implemented for you by default:

• aggressive: this is the default mode and it always validates on input.
• passive: doesn't validate on any event, so you can only validate manually.
• lazy: validate on change.
• eager: validates on change for the first time, then if the field is invalid it will validate on input. If the field turns valid again it will go back to validating on change. This was a popular request by many developers #1426.

failedRules (#1916)

Added a new failedRules prop on the validator.verify result object, and is also avaliable in the scopedSlot data in the ValidationProvider. The failedRules is a rule-message object to make rendering custom messages in the UI easier #1898

<ValidationProvider rules="required|email" name="field">
  <div slot-scope="{ errors, failedRules }">
    <input type="text" v-model="value">
    <span v-if="failedRules.required">Come on, this is required!</span>
    <span v-if="failedRules.email">Have you ever seen an email like the one you just wrote</span>   
   </div>
</ValidationProvider>

Cross-Field validation behavior (#1915)

The confirmed and cross-field rules used to trigger validation on both fields whenever one of them gets updated, this was perceived as aggressive to the end user and was changed to only trigger validation on the target field when it has been interacted with. #1902 #1869 #1765

Nested observers (#1889)

Observers can be nested under other observer, parent observers are able to present a state of the entire child observer/provider tree. Parent observers are able to trigger validate and reset on child observers and providers.

Fixes

• numeric rule support for the Arabic numerals. (#1918)
• provider rules watcher triggering unnecessary validations that may cause an infinite render loop #1920 (#1925)
• rules with specific config imported from the minimal bundle were not working correctly (#1921)
• Checkboxes validation issues with Vue 2.6 and ValidationProvider #1900 (#1913)
• providers should respect the globally set events #1836
• avoid applying valid/invalid classes initially #1829
• set required flag properly in providers
• set field initial values to current ones on reset #1821
• handle not found fields error message #1828
• added verify to the validation decorator #1841
• check the changed flag before validating a field #1723
• cache the provider's debounced handler #1846 (#1852)
• disable aria and validity for components #1854 (#1857)
• added NaN check for directive render loops #1873 (#1880)
• handle component activation/deactivation via keep-alive (#1881)
• VerifyOptions TS properties should be optional #1845 (#1882)