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.

<form wire:submit.prevent="submitForm" >
 <!-- Form fields go here -->

 <button type="submit" >Submit</button>
 </form>

<script>
 document.addEventListener("DOMContentLoaded", function() {
 // Initialize the kt-stepper and FormValidation.io

 document.getElementById("submitButton").addEventListener("click", function() {
 // Perform client-side validation using FormValidation.io
 const isValid = validateForm();

 if (isValid) {
 // Show a SweetAlert for confirmation
 Swal.fire({
 title: "Submit Form?",
 text: "Are you sure you want to submit this form?",
 icon: "warning",
 showCancelButton: true,
 }).then((result) => {
 if (result.isConfirmed) {
 // Proceed with Livewire submission
 Livewire.emit("submitForm");
 }
 });
 }
 });
 });
 </script>

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");
 }

@if (session("success"))
 <div class="alert alert-success">
 {{ session("success") }}
 </div>
 @endif

 @if ($errors->any())
 <div class="alert alert-danger">
 </p><ul>
 @foreach ($errors->all() as $error)
 <li>{{ $error }}</li>
 @endforeach
 </ul>
 </div>
 @endif

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

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

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.