Showing an error in Quasar Stepper when a required field is left empty

Working with the Quasar framework, I have created a stepper with several fields in each step. Some of these fields are required, as shown below:

 <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>

A computed property named Required is defined as follows: Required() { return [(v) => !!v || 'Saisissez quelque chose :-)'] }, I want the first step to display an error if the infos.motif field is left empty when I change steps.

I am trying to link the :error property from step to the rules of the field but I am facing challenges with this. Any guidance would be highly appreciated.

UPDATE1 A form with a ref has been added to the first 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">

The method checkform1() has been implemented to handle this.

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

However, I am unable to access my form. When using this.$refs.stepper, the $ref appears to be empty... UPDATE2 A sample has been created on Codepen here

javascriptvue.jsquasar-frameworkquasarstepper

Answer №1

I took a major stride forward... The concept involves navigating through data and triggering my checkform function before transitioning.

<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

However, there is another issue. When I reach a specific step, the other form is not available... and if I go from step 1 to step 3... I can't check step 2 as shown here

Ultimately, I devised a different approach. I maintained my :error="stateform1" but additionally, I checked on the server side, and if a field is missing, I return the name of my step and update the variable when an error occurs in the return.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do we always need to incorporate components in Vue.js, even if there are no plans for reuse?

I've been pondering this question for some time now: is it necessary for every component to be reusable? Consider a scenario where we have HTML, CSS, and JavaScript that cannot be reused. For instance, a CRUD table designed specifically for managing u ...

javascripthtmlcssreactjsvue.js

Why is it that when drawing rectangles with HTML 5 canvas using pixel size, a black rectangle appears instead of blue?

My intention was to create a large blue rectangle measuring 320 X 240 pixels on the Canvas in Firefox, but I'm only getting a black rectangle instead. This issue is perplexing as I am simply experimenting with pixel drawing and for some reason, it&apo ...

javascripthtmlfirefoxcanvaspixel

What can I do to resolve a node server issue with the error message "npm ERR! code ELIFECYCLE npm ERR! errno 1"?

npm ERROR! code ELIFECYCLE npm ERROR! errno 1 npm ERROR! [email protected] start: node server npm ERROR! Exit status 1 npm ERROR! npm ERROR! Task failed at the [email protected] start script. npm ERROR! This may not necessarily be an ...

javascriptnode.jsexpressnpm

The functionality of uploading files in Dropzone.js is not supported on Windows operating systems

I am currently working on a file uploader using dropzone functionality. I will share the code with you shortly, but first let me outline the problem: My setup consists of an Ubuntu machine running the server code in node.js using the multer library. The f ...

javascriptnode.jsubuntufile-uploaddropzone.js

What steps should I take to resolve this unexpected issue with svelte?

Whenever I attempt to execute the application, an error is consistently displayed to me. Here is a screenshot of the error: https://i.sstatic.net/jfo3X.png This issue always arises on the initial import type line, regardless of the content or arrangement ...

javascripttypescriptsvelte

Exploring ways to display dynamic content within AngularJs Tabs

I need help figuring out how to display unique data dynamically for each tab within a table with tabs. Can anyone assist me with this? https://i.stack.imgur.com/63H3L.png Below is the code snippet for the tabs: <md-tab ng-repe ...

javascriptangularjs

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

javascripthtmlcss

Filtering the data in the table was successful, but upon searching again, nothing was found. [Using Angular, Pagination, and

Having a table with pagination, I created a function that filters the object and displays the result in the table. The issue arises when I perform a new search. The data from the initial search gets removed and cannot be found in subsequent searches. Bel ...

javascriptangulartypescriptfilteremit

The React DOM element undergoes mounting and unmounting on each render cycle when it should be simply altered/updated

As per the React documentation, callback refs are invoked during both component mounting (with the DOM element's value) and unmounting (with null): When a React component mounts, the ref callback is triggered with the actual DOM element, and when it ...

javascriptreactjsmaterial-uicallbackref

discovering a new type of mutation through the use of Vuex

Vue Component computed: { score () { this.$store.commit('fetchCoordinates'); console.log(this.$store.getters.cordinate); } } store.js export default { state: { lat:'ok', }, getters:{ cordinate(state){ r ...

javascriptvue.jsvuejs2vue-componentvuex

Setting a Vue child component class directly from its parent component

In my Vue component, I have multiple child components that are inputs of the same type. The number of inputs can vary depending on the user, but there is a rule that at least one input must be filled. For example, there could be 5 inputs with 4 of them emp ...

javascriptvue.js

Unlock the Power of Core 2 MVC with the Cutting-edge Integration of

Looking for a solution on how to effectively use JQuery Datatables with Core MVC? Check out this helpful resource: Using jQuery DataTables Grid With ASP.NET CORE MVC I recently downloaded the sample project and made some modifications to fit my needs. It ...

javascriptjsonasp.net-mvcasp.net-coredatatables

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt

Tips for organizing HTML logic in a separate document

I am faced with the task of displaying a list in HTML based on specific conditions: <!-- Display list if there are more than 5 results --> <div list.numberOfResults > 10"> <b>Name: </b>{{list.name}} <b>ID ...

javascripthtmlangulartypescript

AngularFire: Retrieve the $value

Having an issue logging the service.title to the console as it keeps returning as a strange object. .factory('service', function($firebase, FBURL, $routeParams) { var ref = new Firebase(FBURL + "services/" + $routeParams.serviceId); var titl ...

javascriptangularjsfirebaseangularfire

Solve problems with limitations on ng2-dnd drop zones

I successfully integrated drag and drop capabilities into my Angular 4 application using the ng2-dnd library. Within my application, I have containers that can be sorted, as well as individual items within each container that can also be sorted. My goal i ...

javascriptangulardrag-and-dropdrag

Passing events from a VueJs 3 grandchild component to its grandparent component

I'm still getting the hang of Vue and diving into my initial project. I'm currently focusing on constructing a form that involves multiple child and grandchild components. The issue arose when I realized I needed to generate multiple copies of th ...

vue.jsvue-componentvuejs3

Are the elements in the second array the result of squaring each element in the first array? (CODEWARS)

I am currently working on a 6kyu challenge on codewars and I've encountered a frustrating issue that I can't seem to figure out. The task at hand involves comparing two arrays, a and b, to determine if they have the same elements with the same mu ...

javascriptarraysdebuggingcompare

Tips for updating state in response to changes in props

I am working on a project where I have a Parent component that renders a large form. The Parent component has child components Child1 - Child4, which are responsible for rendering input fields. Whenever the props of the Parent component change, I need to ...

javascriptreactjslifecycle

Instructions on creating an input field and a slider simultaneously

Currently, I am exploring the world of CSS 3D transforms and I am particularly interested in creating sliders to manage these transforms. I recently stumbled upon the Three.js editor and was impressed by how it handles the positioning, rotation, and scalin ...

javascriptjqueryhtmlinputthree.js