How show error in Quasar Stepper when required field is empty

Question

I work with Quasar framwork. I create a stepper and in each step I've several field. Some are required like this:

 <q-stepper dense v-model="step" ref="stepper" color="primary" animated header-nav>\
            <q-step dense :name="1" title="Infos générales" icon="settings" :done="step > 1"  :error="step < 3">
                <q-card-section class="q-pt-none">
                    <div class="q-col-gutter-x-md">
                        <q-input class="full-width" dense v-model="infos.motif" label="Raison *" hint="Détaillez la raison. * Champs requis" :rules="Required"></q-input>
                    </div>
                </q-card-section >
               
            </q-step>
           
            <q-step dense :name="2" title="Mise en copie" icon="assignment" :done="step > 2" >
                <q-card-section class="q-pt-none" >
                    <div  class="row items-start content-start" >
                        <div class="text-subtitle2">A la demande</div>
                        <selectusers v-bind:users="users" v-bind:model.sync="infos.copiedemande"></selectusers>
                     </div >\
                </q-card-section >
            </q-step>
            <template v-slot:navigation>
                <q-stepper-navigation >
                    <q-btn v-if="step > 1" flat color="primary" @click="$refs.stepper.previous()" label="Retour"  />
                    <q-btn @click="$refs.stepper.next()" color="primary" :label="step === 2 ? \'Fini\' : \'Continuer\'" class="float-right"/>
                </q-stepper-navigation >\
            </template >\
        </q-stepper>

Required is a computed : Required() { return [(v) => !!v || 'Saisissez quelque chose :-)'] }, I want when i change step my first step display error if I don't fill my infos.motif field

I don't find how link :error from step to rules from field Thanks for your guidance

UPDATE1 I Add a form with ref in my 1st page.

<q-stepper dense v-model="step" ref="stepper" color="primary" animated header-nav>
            <q-step dense :name="1" ref="step1" title="Infos générales" icon="settings" :done="step > 1"  :error="checkform1()">
                 <q-form ref="myForm1">

Where checkform1 is a method

 checkform1() { return this.$refs.stepper ? this.$refs.stepper.$refs.step1.$refs.myForm1.validate() : true; }

But I can't access to my form. When I has this.$refs.stepper, the $ref is empty... UPDATE2 I create a sample on codepen here

Answer 1

I make a big step... The idea is to pass by a data and on before-transtion call my checkform function

<div id="q-app">

<q-stepper
  v-model="step"
  header-nav
  ref="stepper"
  color="primary"
  animated
  @before-transition="checkform1"
>
  <q-step
    :name="1"
    title="Select campaign settings"
    icon="settings"
    :done="done1"
    :error="stateform1"
  > <q-form ref="myForm" class="q-gutter-md" >
    <q-input
       v-model="firstName"
       :rules="[val => !!val || 'First name is required']"        
      />
</q-form>
    <q-stepper-navigation>
      <q-btn @click="() => { done1 = true; step = 2 }" color="primary" label="Continue"></q-btn>
    </q-stepper-navigation>
  </q-step>

  <q-step
    :name="2"
    title="Create an ad group"
    caption="Optional"
    icon="create_new_folder"
    :done="done2"
  >
    An ad group contains one or more ads which target a shared set of keywords.

    <q-stepper-navigation>
      <q-btn @click="() => { done2 = true; step = 3 }" color="primary" label="Continue"></q-btn>
      <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm"></q-btn>
    </q-stepper-navigation>
  </q-step>

  <q-step
    :name="3"
    title="Create an ad"
    icon="add_comment"
    :done="done3"
  >
    text3

    <q-stepper-navigation>
      <q-btn color="primary" @click="done3 = true" label="Finish"></q-btn>
      <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm"></q-btn>
    </q-stepper-navigation>
  </q-step>
</q-stepper>
 </div>
</div>

and js

new Vue({
el: '#q-app',
data () {
return {
  step: 1,
  done1: false,
  done2: false,
  done3: false,
   firstName: '',
  stateform1:false
}
},
methods: {
reset () {
  this.done1 = false
  this.done2 = false
  this.done3 = false
  this.step = 1
  this.stateform1=false
  this.firstName= ''
},
checkform1() {
 if (this.$refs.myForm) {
    this.$refs.myForm.validate().then(success => {
      if (success) {
        this.stateform1= false;
      }
      else {
       this.stateform1= true;
      }
    });
  }
} //this.step<3; 
}
})

like here

But stay another problem. When I'm on specific step, the other form don't exist... and if I pass step1 tp step 3... i can't check step2 like u can see enter link description here

Finally I found another way. I keep my :error="stateform1" but I check in addition in server side and if I've a missing field I return the name of my step and change the variable when I was a error in return