How show error in Quasar Stepper when required field is empty



  • Hi,
    I create a stepper and in each step I’ve several field. Some are required. I Want show error on right panel to easier research error

    <div id="q-app">
      <div class="q-pa-md">
        <q-btn label="Reset" push color="white" text-color="primary" @click="reset" class="q-mb-md"></q-btn>
    
        <q-stepper
          v-model="step"
          header-nav
          ref="stepper"
          color="primary"
          animated
          
        >
          <q-step
            :name="1"
            title="Select campaign settings"
            icon="settings"
            :done="done1"
            :error="checkform1()"
          > <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"
          >
            Try out different ad text to see what brings in the most customers, and learn how to
            enhance your ads using features like ad extensions. If you run into any problems with
            your ads, find out how to tell if they're running and how to resolve approval issues.
    
            <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 my code

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

    I put an esemple on codepen

    It’s no working but I don’t understand why. Thnaks for your guidance



  • @Pelote I make a big step using @before-transition and a data. But now my problem is q-form in a specific step exist only when I’m on my step. If I pass from step1 to step 3 I can’t check myform2 like u can see there


Log in to reply