I'm glad you were able to figure it out!
I appreciate your patience. If you have any more questions or run into any other issues in the future, please don't hesitate to reach out.

Figured it out!
In your global stepper.js file you have an "if" to prevent the step index change if the step is already shown - in the goTo() function.

// Skip if this step is already shown

if ( index === the.currentStepIndex || index > the.totalStepsNumber || index < 0 ) {

return;

}

Hi,
thanks for that. I understood the code and put it where my KTStepper is initialized.

I console.log the value of the getCurrentStepIndex() method, and this works fine:
1 - step one
2 - step two
Now everything works fine once I'm in step 1, but still, when I click next and go to step 2 and fill a value in any input, the console logs getCurrentStepIndex() as value 2 but the view switches to step 1. From then on, I can't even go back to step 2 with the Next button, as KTStepper and JS think they're in step 2 and probably try to validate my other fields from step 2, which were left empty.

To prevent Livewire from automatically switching the KTStepper view to the first step when you type in step 2 fields, you can place the provided code in your JavaScript file where the KTStepper is initialized.

Assuming you have a JavaScript file where you initialize your KTStepper, you can include this code there. Make sure you place it within the context of your KTStepper initialization:

// Initialize KTStepper

const stepper = new KTStepper(stepperElement, {

    // Your KTStepper configuration options here

});



// Handle Livewire events

Livewire.hook("message.processed", (message, component) => {

    // This is needed because the stepper component is reset when the Livewire component is updated

    // Prevents the stepper from jumping to the first step



    // Check if the component contains the stepper

    if (component.el.contains(stepperElement)) {

        // Get the current step index before it gets reset

        const currentStepIndex = stepper.getCurrentStepIndex();

        

        // Go to the previous step

        stepper.goTo(currentStepIndex);

    }

});

Hi, thanks a million. Finally, I managed to set my insert working, but I still have one problem though.

Livewire fields have some kind of conflict with the KTStepper:

1. When I fill out my inputs on the first step - all OK
2. When I type anything on any field in step 2, It automatically switches the KTStepper view to step 1 - probably because the fields are mapped to livewire component and the "data refresh" resets the steps in KTStepper. Is there any way to prevent this?

EDIT: I found a similar problem https://devs.keenthemes.com/question/ktstepper-with-laravel-livewire but I don't exactly know where to put this code. I tried in different places but it does not work for me.

Thank you :) mati

To create a submit button that handles JavaScript logic for the kt-stepper, client-side validation (using FormValidation.io), and SweetAlerts, while also being able to submit data to a Livewire component for server-side validation and database storage, you can follow these steps:

1. HTML Structure: Start by creating an HTML form with a Livewire component. Make sure to include the necessary JavaScript and CSS files for kt-stepper and FormValidation.io.

 

 
 
 Submit
 
 

2. JavaScript Logic: Add JavaScript logic to handle the kt-stepper, client-side validation, and SweetAlerts. Ensure the submitForm Livewire function is called when the submit button is clicked, and conditionally handle the success or failure of the Livewire component submission.

3. Livewire Component: In your Livewire component, create the submitForm method to handle the server-side validation and data storage. You can use Livewire's validation features and the save() method to store data in the database.

 public function submitForm()
 {
 $this->validate([
 // Add your validation rules here
 ]);
 
 // If validation passes, save data to the database
 $this->save();
 
 // Display a success message with SweetAlert
 session()->flash('success', 'Form submitted successfully!');
 
 // Reset the form or perform other actions
 
 // Additional logic if needed
 
 // Redirect or refresh the page
 return redirect()->to('/your-page');
 }

4. Display Success/Error Messages: In your Livewire component's view, you can display success or error messages using the session flash messages or Livewire properties. Additionally, you can conditionally show/hide messages using Livewire.

 @if (session('success'))
 

 {{ session('success') }}
 
 @endif

 @if ($errors->any())
 

 

 @foreach ($errors->all() as $error)
 
{{ $error }}
 @endforeach
 
 
 @endif

This approach combines the best of client-side and server-side validation while providing user-friendly SweetAlerts for confirmation and success/error messages. Make sure to customize the JavaScript, Livewire component, and FormValidation.io validation rules according to your specific requirements.