Validation in q-stepper

[akashramtohul4]

Hello Friends ,

Am having a problem to find the correct way to implement a function for validation on q-stepper. I have some input fields in a child component which is found on a q-stepper which is my parent component . The problem is if i have a mandatory field that is not filled it should not move to the next step

can you please help me

Thanks

[ontwikkelfabriek]

@akashramtohul4

Please create a codepen.io for better support.

[MatthewSH]

If you look at a basic implementation of the QStepper you'll see a few things. It can be kind of confusing at first glance so I don't blame you at all for needing help and I applaud you for asking for help!
To move from step 1 to step 2 you need to make the :name equal to the value of step 2. This is done, in the examples, by incrementing the value of step (v-model on the QStepper) through the @click event. You can add validation here.

If you want it only on that step, you can follow the example for QStepperNavigation which is shown in Vertical QStepper example.
You just have to leverage that @click event to validate your inputs...if it's not valid, then don't increment to the next step until it is. If you have a child component within the step itself that does validation then you get into parent-child communication which is its own thing altogether, but you can do it.