How to validate all fields in one Vue-component with another components together (using Vee-Validate)?

Question

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.

VoVaVc · Accepted Answer · 2019-11-21 20:41:00Z

4

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>

answered Nov 21, 2019 at 20:41

VoVaVc

8511 gold badge14 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kris Tryber Over a year ago

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!

H_H Over a year ago

@KrisTryber How to do the validation with dynamic form with child components?

Collectives™ on Stack Overflow

How to validate all fields in one Vue-component with another components together (using Vee-Validate)?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related