Validate child input components on submit with Vee-Validate
<p>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: <a href="http://vee-validate.logaretm.com/examples#validate-form" rel="noreferrer">http://vee-validate.logaretm.com/examples#validate-form</a> but the validateAll() method has no fields attached to it.</p>

<p>I tried populating validateAll() with email &amp; confirm_email which got me the result I wanted, but the error messages would not show next to the fields.</p>

<p>Any help would be much appreciated!</p>

<p>ValidatedInputField.vue:</p>

<pre><code>&lt;template&gt;
   &lt;div class="form-control" v-bind:class="{ errorPrompt : errors.has(name) }"&gt;
      &lt;label v-bind:for="name"&gt;* {{as}}&lt;/label&gt;
      &lt;input ref="input" v-bind:value="_value" @input="updateValue($event.target.value)" v-validate v-bind:data-vv-rules="rules" v-bind:name="name" /&gt;
      &lt;span v-bind:v-show="'errors.has(' + name +')'"&gt;{{ errors.first(name) }}&lt;/span&gt;
   &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
module.exports = {
  props: ['name', 'rules', 'as', 'value'],
  methods: {
  updateValue(value) {
     this._value = this.value;
     this.$emit('input', value);
  }
  },
  computed: {
     _value() { return this.value; }
  }
};
&lt;/script&gt;
</code></pre>

<p>Register.vue:</p>

<pre><code>&lt;template&gt;
  &lt;div class="container"&gt;
    &lt;Card blueHeader="true" title="Register"&gt;
      &lt;ValidatedInputField v-model="email" name="email" rules="required|email" as="Email" /&gt;
      &lt;ValidatedInputField v-model="confirm_email" name="confirm_email" rules="required|email" as="Confirm Email" /&gt;
      &lt;ValidatedInputField name="company" rules="required" as="Company" /&gt;
      &lt;InputField name="company_website" as="Company Website" /&gt;
      &lt;ValidatedInputField name="first_name" rules="required" as="First Name" /&gt;
      &lt;ValidatedInputField name="last_name" rules="required" as="Last Name" /&gt;
      &lt;ValidatedInputField name="address_1" rules="required" as="Address 1" /&gt;
      &lt;InputField name="address_2" as="Address 2" /&gt;
      &lt;ValidatedInputField name="city" rules="required" as="City" /&gt;
      &lt;ValidatedInputField name="zip" rules="required" as="Zip/Postal Code" /&gt;
    &lt;/Card&gt;

    &lt;Card blueHeader="true" title="Terms &amp; Conditions"&gt;
      &lt;button v-on:click="submitForm()"&gt;Submit&lt;/button&gt;
    &lt;/Card&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import ValidatedInputField from './components/ValidatedInputField';
import InputField from './components/InputField';

module.exports = {
  methods: {
    submitForm() {
      this.$validator.validateAll();
    }
  },
  data() {
    return {
      email: '',
      confirm_email: ''
    };
  },
  components: {
    ValidatedInputField,
    InputField
  }
};
&lt;/script&gt;
</code></pre>