No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How show error in Quasar Stepper when required field is empty

    Framework
    rules stepper
    1
    2
    831
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      Pelote last edited by Pelote

      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

      P 1 Reply Last reply Reply Quote 0
      • P
        Pelote @Pelote last edited by

        @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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post