Validating child component components on dispatch using Vee-Validate

Question

I am currently trying to create a registration form with several input field components that require verification after clicking the submit button. All of them are currently checking on their own when the text inside changes, but it's hard for me to make a global call for all input fields to check everything. I am trying to achieve the following: http://vee-validate.logaretm.com/examples#validate-form, but the validateAll () method has no fields attached to it.

I tried to fill out validateAll () with email and verify_email, which gave me the desired result, but error messages did not appear next to the fields.

Any help is appreciated!

ValidatedInputField.vue:

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

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

Register.vue:

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

    <Card blueHeader="true" title="Terms & Conditions">
      <button v-on:click="submitForm()">Submit</button>
    </Card>
  </div>
</template>

<script>
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
  }
};
</script>

Answer 1

, . , . "this. $Validator.validateAll()", 'this' .

, ( "" ). , .

var bus = new Vue({});

:

bus.$emit('validate_all');

:

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

. !

Answer 2

, , . "/", v-validate.

, ( , TYPESCRIPT!)

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

/ :

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

, . (. : https://baianat.imtqy.com/vee-validate/api/errorbag.html#api).

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

- ; vee-validate - _vm.errors

grtz

Answer 3

. vee-validate, , , Vue 2.0, vue-validator . .

, Vuex, , , :

:

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
  }

:

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

, , isValid.

$emit , → → , .

Answer 4

Vuejs :

inject: ['$validator'],

,

:

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

.

Answer 5

vee-validate:

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

, .

, :

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

:

export default {
    // This will make the component inherit it parent 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'],
    ...........

: https://baianat.imtqy.com/vee-validate/concepts/components.html