Bootstrap 5 - Form Multi Step Wizard - Validation One Page at a Time
I Have a Problem with My Multi Step Form. Whenever I Click the "Next" Button, Instead of Just the Current Tab Being Validated, It Validates All the Tabs on the...
I have a problem with my multi step form. Whenever I click the "next" button, instead of just the current tab being validated, it validates all the tabs on the form. How can I do to just validate only the current TAB?
If I have a form in each TAB, the validation will work as I want, but then I can't submit all forms at once.
index.php
<div id="rootwizard">
<ul class="nav nav-pills form-wizard-header mb-3">
<li class="nav-item" data-target-form="#one">
<a href="#basic" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
<span>Info</span>
</a>
</li>
<li class="nav-item" data-target-form="#two">
<a href="#first" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
<span>Device</span>
</a>
</li>
</ul>
<div>
<div id="basic">
<form id="one" method="post" action="" class="form-horizontal">
<div class="row mb-3">
<label for="Client_Emp">Cliente/Empresa</label>
<div>
<input type="text" name="Client_Emp" id="Client_Emp" required />
</div>
</div>
</form>
</div>
<div class="tab-pane" id="first">
<form id="two" method="post" action="" class="form-horizontal">
<div class="row mb-3">
<label for="cpu">CPU</label>
<div>
<input type="text" name="cpu" id="Client_Emp" required />
<option></option>
</select>
</div>
</div>
</form>
</div>
<ul class="list-inline wizard mb-0">
<li class="previous list-inline-item"><a href="#" class="btn btn-info">Previous</a>
</li>
<li class="next list-inline-item float-end"><a href="#" class="btn btn-info">Next</a></li>
</ul>
</div> <!-- tab-content -->
</div> <!-- end #rootwizard-->
1 Answer
Thanks. I managed to solve it with this javascript.
$("#global").submit(function(e) {
var $ch1 = $("#form_info").children();
var $ch2 = $("#form_first").children();
var $ch3 = $("#form_second").children();
var $ch4 = $("#form_third").children();
var $ch5 = $("#form_fourth").children();
var $ch6 = $("#form_fifth").children();
$(this).append($ch1).append($ch2).append($ch3).append($ch4).append($ch5).append($ch6);
$("#global").submit();
});
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
