Vee-validate: Optional emitting events by ValidationProvider

Created on 4 Feb 2020  Â·  1Comment  Â·  Source: logaretm/vee-validate

Is your feature request related to a problem? Please describe.
Sometimes it would be useful if ValidationProvider emitted events when, i.e. validation state has changed or the field has been touched, etc. Scoped slots are nice but they can be accessed only in template inside ValidationProvider. Right now it is not possible to react for validation state changes in JavaScript.

As an example - I want to do some action when the validation state of the field changes from 'valid' to 'invalid'. How can I achieve that? In Vue.js it would be great if I could set watchers on scoped slots, but Vue does not offer such a capability.

Here someone had samilar problem as me (also with vee-validate library):
https://forum.vuejs.org/t/watch-slot-props/63228/4

Describe the solution you'd like
Add an OPTIONAL prop/props for the ValidationProvider which will turn on emitting events.

Example events:

  • validationStateChanged
  • touched
    ...

and maybe more

Additional context
By default ValidationProvider should not emit any event. Emitting events should be turned on for a specific instance of ValidationProvider or globally for all ValidationProviders.

request ✨ enhancement

Most helpful comment

For anyone curious on how you can emit an event from ValidationProvider here's a basic example, using $refs.validator as the wrapped provider.

export default {
    components: {
      ValidationProvider
    },
    mounted() {
      this.$watch(() => {
        return this.$refs.provider.errors;
      }, (val) => {
        if (val && val.length !== 0) {
          this.$emit('invalid');
        } else {
          this.$emit('valid');
        }
      });
    },
  }

I'd like to add that for me it would be preferable to have these kind of events not optional but enabled by default.

>All comments

For anyone curious on how you can emit an event from ValidationProvider here's a basic example, using $refs.validator as the wrapped provider.

export default {
    components: {
      ValidationProvider
    },
    mounted() {
      this.$watch(() => {
        return this.$refs.provider.errors;
      }, (val) => {
        if (val && val.length !== 0) {
          this.$emit('invalid');
        } else {
          this.$emit('valid');
        }
      });
    },
  }

I'd like to add that for me it would be preferable to have these kind of events not optional but enabled by default.

Was this page helpful?
0 / 5 - 0 ratings