Stepper issue in HTML
Hello Team,
I have purchased the Metronic 8 and currently using HTML version for creating some prototypes. I have facing some issues specially with Stepper which is under Wizards. Below are my questions:
1. Currently, there are 5 steps in the stepper in HTML and below that there is Back / Continue / Submit buttons are available. How to add extra steps in this stepper? If we add one extra step by copying the code, im unable to add Continue button to the extra added step. So how and where i can add/change the code to add Continue and back button to that extra added step in stepper?
Please refer this screenshot - https://prnt.sc/26jhcmv
2. Where and how i can change the validations of the form applied in the stepper? In which file i need to do changes to add/edit the validations applied in stepper form?
Please help!
Note - Not using PHP or Laravel - Simply using HTML version for prototyping so editing files under HTML folder.
Replies (2)
Hello Team,
Please reply ASAP. If you are not sure if i have purchase your theme then send your ticket system link will provide purchase code and everything. Awaiting your response.
Hi,
You can copy and paste any of the steps (except for the first and last steps) to create new steps within the wizard.
Please note that the wizard component comes in 2 sections: Nav and Form. Therefore, when you add a new step, you'll need to duplicate a Nav element and a Form element.
If you look at the sample page in your screenshot (https://preview.keenthemes.com/metronic8/demo1/utilities/wizards/horizontal.html):
The nav part looks like this:
<!--begin::Step 2-->
<div class="stepper-item pending" data-kt-stepper-element="nav">
<h3 class="stepper-title">Account Info
</div>
<!--end::Step 2-->And the form part looks like this:
<!--begin::Step 2-->
<div data-kt-stepper-element="content" class="pending">
<!--your content here-->
</div>
<!--end::Step 2-->Please note to maintain the CSS classes and data attributes as that's how our JS detects the steps.
As for the continue button, it's a shared element across all steps, so you do not need to make any modifications there. Just be sure when you duplicate the HTML code, it's placed right next to the other steps.
For the validation, the JS file is located here:
theme/demo/src/js/custom/utilities/modals/create-account.js. Similarly with the HTML, you can copy and paste the validation object from any step and replace the fields with the ones you have in your new step form. The field name references the input name attribute.Lastly, please be aware of the new step you're adding. If you're adding a new 3rd step, then you'll need to add the validation object in the 3rd position as well.
Hope this helps!
