Question

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

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

我正在使用Codeigniter，Bootstrap，Jquery和Jquery验证

这是我的代码。（仅限样本）

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

Answer 1

隐藏所有标签并仅显示第一个标签。然后在next按钮上单击“执行验证”，如果字段有效则显示并打开下一个选项卡。

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

1 个答案: