Bootstrap 5 -表单多步骤向导-一次验证一页

rdrgkggo  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(254)

我的多步骤表单有问题。每当我按一下“下一步”按钮时,它会验证表单上的所有索引标签,而不是只验证目前的索引标签。我该如何只验证目前的索引标签?
如果每个选项卡中都有一个表单,验证将按我的要求进行,但这样我就不能一次提交所有表单。

索引.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-->
myss37ts

myss37ts1#

谢谢,我用这个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();
       });

相关问题