Validate child input components on submit with Vee-Validate

Question

I\'m currently trying to create a Registration form with multiple \"Input Field\" components which all require validating once Submit has been pressed. They all currently va

Answer 1

I'm not sure I understand you correctly. But to make the call globally, you will have to emit an event on clicking the button and instruct each template to act upon that event. The action for each template should be to 'this.$validator.validateAll()', because 'this' will refer to that specific template.

You can do that by creating a named instance ('bus'). Create that before creating the instance.

var bus = new Vue({});

Use that to emit from the template:

bus.$emit('validate_all');

and to catch in a template:

created: function() {
   var vm = this;
   bus.$on('validate_all', function() {
      vm.$validator.validateAll()
   });
}

Now all fields should have been validated and all error messages should show. Good Luck!

Answer 2

I have a similar setup, I tried the bus solution with the events, didn't get it working. I however used the Provider/Injector pattern as defined in the specs of v-validate.

So in the top most parent, add this line of code (mind it is TYPESCRIPT !)

 @Provide('validator') $validator = this.$validator;

And in every child/grandchilds add this line of code:

@Inject('validator') $validator: any;

Now you can do this in your parent, and I will gather all errors from all components with the validator injector. (see specs: https://baianat.github.io/vee-validate/api/errorbag.html#api)

 if (this.$validator.errors.any()) {
      // Prevent the form from submitting
      e.preventDefault();
    }

I have a sort-a-like answer in post; vee-validate error object - _vm.errors is undefined

grtz

Answer 3

In my case what I do is that I that I disable vee-validate injection:

Vue.use(VeeValidate, { inject: false });

This will make the plugin stop instantiating a new validator scope for each component instance, excluding the root instance.

And in the parent component i get a new validator instance which i'll share with the desired childs:

export default {
  $_veeValidate: {
      validator: 'new' // Determines how the component get its validator instance
                       // 'new' means it will always instantiate its own validator instance
  },
  ......

In the child component i inject that parent's validator instance:

export default {
    // This will make the component inherit it's parent's validator scope,
    // thus sharing all errors and validation state. Meaning it has access
    // to the same errors and fields computed properties as well.
    inject: ['$validator'],
    ...........

Resource: https://baianat.github.io/vee-validate/concepts/components.html

Answer 4

For plain Vuejs i use:

inject: ['$validator'],

in the child,

and:

provide() {
   return {
     $validator: this.$validator,
   };
},

in the parent.

Answer 5

I had to use a promise to check validation before submitting form.

Code below from @ChalkyJoe original question

module.exports = {
  methods: {
    submitForm() {
      //this.$validator.validateAll();
      this.$validator.validateAll().then((result)=>{
          if(!result){
            error();
          }
          submit();
      })
    }
  },
  data() {
    return {
      email: '',
      confirm_email: ''
    };
  },

Answer 6

I'm using a different validator library. I haven't heard of vee-validate, but it looks neat and I might switch since it supports Vue 2.0 whereas vue-validator does not right now. They look pretty similar in concepts though.

Assuming you're not using Vuex and this is a small app, you could use a computed property to grab the validation status of each of the children:

Parent:

isValid: function () { 
    for (var i = 0; i < this.$children.length; i++) {
      if (this.$children[i].hasOwnProperty('isValid') && !this.$children[i].isValid) {
        return false
      }
    }
    return true
  }

Child:

  isValid: function () {
    return this.$vueValidator.valid
  }

If you have a child that you don't want to be validated just don't give it an isValid computed property.

You could also $emit an event from a child when they change states from invalid -> valid or valid -> invalid to tell the parent.