Nuxtjs multi-step-form validations needs to be popped-up when clicking on the nuxt-link button using vee-validate

Question

I'have separate components for all my pages to be navigated one after another if required fields are filled if not I should get all error messages as a pop-up if the required fields are not filled.

We have used vee-validate library to display all the errors it is working fine, when we actually focusing on the input and not-filling it, we are able to see the error message, but when we are not focusing and directly clicking continue, I am not seeing any errors

 <template> <section> <ValidationObserver ref="form" v-slot="{ invalid }"> <form class="text-left"> <div> <select class="form-control w-25" v-model="name1" v-on:change="saveData($event)" > <option value="0">Please select</option> <option>1</option> <option>2</option> <option>3</option> </select> </div> <ValidationProvider rules="required" v-slot="{ errors }"> <div> <input type="text" v-model="firstName" v-on:change="saveData($event)" id="fname" /> <span style="color: red; font-Weight: bold; font-size: 12px">{{ errors[0] }}</span> </div> </ValidationProvider> <ValidationProvider rules="required" v-slot="{ errors }"> <div class="pb-2 pt-2"> <input type="text" v-model="lastName" v-on:change="saveData($event)" id="lname" placeholder /> <span style="color: red; font-Weight: bold; font-size: 12px">{{ errors[0] }}</span> </div> </ValidationProvider> </form> </ValidationObserver> <footer></footer> </section> </template> <script> import {ValidationProvider, ValidationObserver} from 'vee-validate'; import footer from '@component/footer'; components:{ ValidationProvider, ValidationObserver, footer } methods:{ saveData(event){ console.log(event) } } </script>

** Footer Component ** I have used validationObserver with refs also but, not able to trigger.validate()

 <template> <section> <b-row> <b-col> <nuxt-link v-if="continueToNextPage():= 'null'" class="applyContinue":to="continueToNextPage()">Continue</nuxt-link> </b-col> </b-row> </section> </template> <script> export default { methods. { continueToNextPage(){ this.$refs.validate() } } } </script>

Can you please help us in resolving this issue!

Answer 1

The footer component doesn't have access to its parent's ref so you cannot validate from there, instead let it emit a continue event and have the parent listen for it and trigger validation accordingly.

footer.vue

<template>
    <section>
    <b-row>
    <b-col>
        <nuxt-link v-if="continueToNextPage() != 'null'" class="applyContinue" :to="continueToNextPage()">Continue</nuxt-link>
      </b-col>
    </b-row> 
    </section>   
</template>

<script>
export default {
  methods: {
    continueToNextPage(){
      this.$emit('continue');
    }
  }
}
</script>

And the parent component:

<ValidationObserver ref="form" v-slot="{ invalid }">
  <!-- .... -->
</ValidationObserver>

<footer @continue="$refs.form.validate()"></footer>