Bootstrap 5 - form multi step wizard - validation one page at a time

Question

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

Answer 1

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