3

I use Vue.js 2.5.13 + Vee-Validate 2.0.3. My code structure is:

./component-one.vue:

<template>
  <div>

    <input type="text" name="input_one" id="input_one"
           v-model="input_one" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_one')}" />

    <component-two></component-two>

    <button @click="submitForm">Submit!</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'
  import ComponentTwo from './component-two.vue'

  Vue.use(VeeValidate, {
    events: 'input|blur'
  })

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: '',
      }
    },
    methods: {
      submitForm: function () {
        // Validate before submit form
        this.$validator.validateAll().then((result) => {
          if (result) {
            alert('From Submitted!')
            return
          }
          alert('Correct them errors!')
        })
      }
    }
  }
</script>

./component-two.vue:

<template>
  <div>

    <input type="text" name="input_two" id="input_two"
           v-model="input_two" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_two')}" />

  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_two: ''
      }
    }
  }
</script>

How to validate field from ComponentTwo, when I click to button @click="submitForm" in ComponentOne (for save all form data at this component).

I have huge form, who made by similar small Vue-components (all collected in ComponentOne), would be great to validate all of them in one place.

1 Answer 1

3

You can trigger validateAll() on the component manually trough vue reference, like:

parent component

<template>
  <div>

    <input type="text" name="input_one" id="input_one"
           v-model="input_one" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_one')}" />

    <component-two ref="validateMe"></component-two>

    <button @click="submitForm">Submit!</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'
  import ComponentTwo from './component-two.vue'

  Vue.use(VeeValidate, {
    events: 'input|blur'
  })

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: '',
      }
    },
    methods: {
      submitForm: async function () {
        // Validate before submit form
        const result = await this.$validator.validateAll() && await this.$refs.validateMe.$validator.validateAll()
        if (result) {
          alert('From Submitted!')
          return
        }
        alert('Correct them errors!')
      }
    }
  }
</script>
2
  • We should mark this answer as the correct one. Without using vee validate you can do this with "this.$refs["form"].validate() in your parent component for any form in a child component. Saved me here thanks man! Mar 10, 2021 at 16:18
  • @KrisTryber How to do the validation with dynamic form with child components?
    – H_H
    Oct 14, 2021 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.