vee-validate 2.0.0-rc.4

on Node.js NPM

⚠️ The library now expects a Vue version >= 2.2.0 in order for all features to work correctly. ⚠️

Fixed 🐛

• Fix an issue when validator fails upon attaching fields with dots in their name #462.
• Fix an issue when debouncing with 0ms caused unintended asynchronous behavior #376.

Enhancements 🛠

• Added false to the list of empty values for the required rule (useful for checkboxes).
• You can now globally set the events you are interested in for validation, by setting the events option:

Vue.use(VeeValidate, {
    events: 'input|blur' // default value.
});

⚠️ Note that this feature currently only works for native inputs, components are excluded from this behavior.

• Errors Messages can also be strings now instead of functions, which should make JSON lang files possible.
• Added clean method to the validator object which clears the errorBag in the next tick, which helps you clear the errors after form resets.

this.$validator.clean();

If you are using the validator object standalone without an associated component, then it would call errors.clear() immediately.

New Stuff ✨

Parent Injections #468

If you ever needed to use the validator on specific inputs, or share validator instance and errorBag instances, you previously had to communicate the errors via an event bus or similar approaches. The library now takes advantage of Vue's Provide/Inject API Which enables you to inject the parent's validator instance along with the errorBag and the fieldBag instances.

To Inject the parent component validator you need to request $validator in your injections:

export default {
    inject: ['$validator']
};

// or

export default {
   inject: {
        $validator: '$validator'
   }
};

Otherwise the plugin will create a new validator for that component if it doesn't inject from the parent.

Furthermore, you might want to disable autmatic injection of validators and control which component injects the validator and which gets a new one. To enable this behavior you must first disable the automatic injection by setting the inject option to false when installing the plugin:

Vue.use(VeeValidate, {
    inject: false // turn off automatic injection.
});

This stops the plugin from creating a validator instance for each component, which maybe desired when using third party libraries that may conflict with the library injections.

Note: The errorBag and the fieldBag objects are only injected if your component have a validator instance, regardless how your component got it. Also if you try to use the directive in a component that does not have a validator instance it will display a warning.

Thanks for @alpaelf i for providing great feedback and discussion for this feature.

Custom Field Messages #490

You might need to provide different messages for different fields, for example you might want to display an error message for the email field when its required, but a different message when the name is required. This allows you to give your users a flexible experience and context aware messages.

To do this you would need to add an object to the dictionary called custom like this:

const dict = {
  en: {
    custom: {
      email: {
        required: 'Your email is empty'
      },
      name: {
        required: () => 'Your name is empty'
      }
    }
  }
};

Then you would need to add the dictionary we just constructed to the current validators dictionary like this:

Validator.updateDictionary(dict);
// or use the instance method
this.$validator.updateDictionary(dict);

Any unspecified rules will fallback to their uncustomized error messages.

As always, many thanks for all those who updated the locale files and who opened issues to make this library better, you guys are awesome 💯