Jquery 在显示所选引导选项卡之前验证表单

我有4个步骤来执行和验证每个引导选项卡

我需要在第一步中验证所需字段，当字段有效并单击“下一步”按钮时，我可以进入下一步（即第二个选项卡）。其他步骤也是如此。当我在第四步点击“继续”按钮时，我可以提交表单并获得所有步骤中所有字段的数据

我正在使用Codeigniter、引导、Jquery和Jquery验证

这是我的密码。（仅样本）

---

隐藏所有选项卡并仅显示第一个选项卡。然后在“下一步”按钮上单击“执行验证”，如果字段有效，则显示并打开下一个选项卡。
隐藏所有选项卡并仅显示第一个选项卡。然后在
next
按钮上单击do validation，如果字段有效，则显示并打开next选项卡。
看看这个。您可以通过在每次单击时验证表单的子集来实现这一点。也许你可以通过在每次单击时验证表单的子集来实现这一点。谢谢，不是我搜索的确切答案，而是你的答案让我了解了如何使用相同的行为重新创建表单。谢谢，不是我搜索的确切答案，而是你的答案让我了解了如何使用相同的行为重新创建表单
<form action="<?=base_url()?>order/submit" id="form" method="post">
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active fade in" id="name">
        <div class="col-md-7">
            <div>Name</div>
            <div><input type="text" class="form-control" name="name"></div>
        </div>
        <div class="col-md-7">
            <div class = "pull-right">
                <a href="#email" aria-controls="email" role="tab" data-toggle="tab">Next</a>
            </div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="email">
        <div class="col-md-7">
            <div>Email</div>
            <div><input type="text" class="form-control" name="email"></div>
        </div>
        <div class="col-md-7">
            <div class="pull-left"><a href="#name" aria-controls="name" role="tab" data-toggle="tab">Back</a></div>
            <div class="pull-right"><a href="#age" aria-controls="age" role="tab" data-toggle="tab">Next</a></div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="age">
        <div class="col-md-7">
            <div>Age</div>
            <div><input type="text" class="form-control" name="age"></div>
        </div>
        <div class = "col-md-7">
            <div class="pull-left"><a href="#email" aria-controls="email" role="tab" data-toggle="tab">Back</a></div>
            <div class="pull-right"><a href="#address" aria-controls="address" role="tab" data-toggle="tab">Next</a></div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="address">
        <div class="col-md-7">
            <div>Address</div>
            <div><input type="text" class="form-control" name="address"></div>
        </div>
        <div class="col-md-7">
            <div class="pull-left"><a href="#age" aria-controls="age" role="tab" data-toggle="tab">Back</a></div>
            <div class="pull-right"><input type="submit" value="Order" class="btn btn-warning"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#form").validate({
            rules:{
                name: {
                    required: true
                },
                email:{
                    required: true
                },
                age:{
                    required: true
                },
                address:{
                    required: true
                }
            },
            errorElement: "span",
            errorPlacement: function (error, element)
            {
                if ( element.prop("type" ) === "checkbox")
                {
                    error.insertAfter(element.parent("label"));
                }
                else
                {
                    error.insertAfter(element);
                }
            }
        });

        $("#form").validate({
            submitHandler: function(form)
            {
                $(form).submit();
            }
        });
    });
</script>