Validate child input components on submit with Vee-Validate and vue js 2

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 validate on their own accord when the text within is changed but I'm finding it difficult to make a global call to all input fields to validate all. What I am trying to achieve is the following:http://vee-validate.logaretm.com/examples#validate-form

yes this is simmiler to this question Validate child input components on submit with Vee-Validate But i dont understand

i have singleInput.vue

<template lang="html">
  <div :class="'col m'+col">
    <div class="input-field">
      <i v-if="icon" class="material-icons prefix">{{icon}}</i>
      <input
      v-if="area"
      :type="type"
      @input="onChange"
      :id="id"
      :required="required"
      :name="id"
      v-validate="'required'"
      />
      <textarea
      v-if="!area"
      @input="onChange"
      :id="id"
      :required="required"
      :name="id"
      class="materialize-textarea"></textarea>
      <label :for="id">
        {{label}}
        <span v-if="required" class="red-text">*</span>

      </label>
      <span class="red-text error">{{$store.state.errors[id]}}</span>
    </div>
  </div>
</template>

<script>

export default {
  name:'single-input',
  props: {
    col:{
      type: Number,
      default:6
    },
    id:{
      type: String,
      required:true
    },
    required:{
      type:Boolean,
      default: true
    },
    label:{
      type:String,
      required:true
    },
    onChange:{
      type:Function,
      required:true
    },
    area:{
      type: Boolean,
      default: true
    },
    type:{
      type: String,
      default: "text"
    },
    icon:{
      type:String
    },
    validation:{

      type:String
    }
  }
}
</script>

<style lang="css">

</style>

and Info.vue

<template lang="html">
  <div class="row">
    <single-input v-for="(info,i) in informations" :id="info.id" :label="info.label" :onChange="onChange" :area="info.area" :key="i" :required="info.required" :col="info.col" :type="info.type" :icon="info.icon"></single-input>

  </div>
</template>

<script>
import SingleInput from "./SingleInput";
export default {
  name: 'info',
  methods:{

  onChange(e){

  }
},
  data(){
    return{
      informations:[
        {
          label: "First Name",
          id: "fname",
          icon: "person"
        },
        {
          label: "Last Name",
          id: "lname",
          required:false,
          icon: "person"
        },
        {
          label: "Email",
          id: "email",
          type:"email",
          icon:'email'
        },
        {
          label: "Telephone",
          id: "phone",
          type:"text",
          icon:'phone'
        },
        {
          label: "Department",
          id: "depa",
          type:"text",
          icon:'domain'
        },
        {
          label: "Organization",
          id: "org",
          type:"text",
          icon:'account_balance'
        },
        {
          label: "Address",
          id: "address",
          icon:'directions',
          area: false,
          col:12
        },
        {
          label: "City",
          id: "city",
          type:"text",
          icon:'place'
        },
        {
          label: "Post code",
          id: "post",
          type:"text",
          icon:'pin_drop'
        }

      ]
    }
  },
  components:{
    SingleInput
  }
}
</script>

<style lang="css">
</style>

I am try all my best but not able to access errors in info.vue

Any help would be much appreciated!

Answer 1

In your example i can't see any validation attempt, but here is my working example in jsfiddle: link

what i did: -add submit method to info component

submit: function(){
        var validationArray = this.$children.map(function(child){
        return child.$validator.validateAll();
      });

    window.Promise.all(validationArray).then((v) => {
            alert('From Submitted!');
        }).catch(() => {
            alert('Correct them errors!');
        });
    }

this method basically validates all children of your info(single-inputs in this case).

-changed a bit template of span with error message:

{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }}

edit: I can only gues what was wrong with your code, but I belive that problem in your case was fact that you have to access a "direct" validators under components with inputs - single-input, not info component.