阻止进程的引导表单向导

Question

我目前已经设置了一个表单向导，让客户在进入下一步之前成功完成每个步骤。我无法弄清楚如何阻止用户进入下一页当我的json中的成功键设置为false时。我相信该项目正在使用bootstrap向导插件。链接到文档就在这里。你可以在下面看到我试图阻止下一步进展的地方，但无论如何它仍在前进。

https://github.com/VinceG/twitter-bootstrap-wizard

<script>
$("#pageOneSubmission").click(function() {
    $.ajax({
        type: "POST",
        url: ...,
        data:
            {
                ...
            },
        dataType: JSON,
        success: function(data) {
            if (!data.success) {
                console.log("Errors");
                $('#orderForm').bootstrapWizard('disable', $('#step2').val());
            } else {
                console.log("No Errors");
                $("#user-created-confirmation").html(data);

                swal({
                    title: "Success!!",
                    text: "Your order & patient profile are saved!",
                    timer: 2500,
                    showConfirmButton: false,
                    type: "success"
                });



            }
        },
        error: function(jqXhr) {
            if (jqXhr.status === 422) {
                var err = JSON.parse(jqXhr.responseText);
                // this wouldn't work cause your redirecting the page, the loop
                // wouldn't loop...
                // window.location = $('#orderForm').attr('action');
                $.each(err, function(key, value) {
                    $('input [name="'+ key +'"]').next().append("<p>Test</p>");
                });
            }
        }
    }, function(){
        setTimeout(function() {

        })
    });
});


<div class="wizard order-form" id="orderForm">
        <div class="wizard-inner">
            <div class="connecting-line"></div>
            <ul class="nav nav-tabs" role="tablist">

                <li role="presentation" class="active">
                    <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                        <span class="round-tab">
                            <i class="glyphicon glyphicon glyphicon-scale"></i>
                        </span>
                    </a>
                </li>

                <li role="presentation" class="disabled">
                    <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                        <span class="round-tab">
                            <i class="glyphicon glyphicon glyphicon-user"></i>
                        </span>
                    </a>
                </li>
                <li role="presentation" class="disabled">
                    <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                        <span class="round-tab">
                            <i class="glyphicon glyphicon glyphicon-edit"></i>
                        </span>
                    </a>
                </li>

                <li role="presentation" class="disabled">
                    <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                        <span class="round-tab">
                            <i class="glyphicon glyphicon-ok"></i>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane active step" role="tabpanel" id="step1">

                    @include('pages.order.stepone')

            </div>
            <div class="tab-pane" role="tabpanel" id="step2">

                    @include('pages.order.steptwo')

            </div>
            <div class="tab-pane" role="tabpanel" id="step3">

                   @include('pages.order.stepthree')

            </div>
            <div class="tab-pane" role="tabpanel" id="complete">

                    <h3>Complete</h3>
                    <p>You have successfully completed all steps.</p>

            </div>
            <div class="clearfix"></div>
        </div>
</div>

Answer 1

Bootstrap向导使用选项卡索引（以0开头）来标识要禁用或启用的选项卡。在您的HTML中，该标签由li项表示，但在您尝试获取div元素的值时。

如果您坚持使用div元素，请尝试使用div中的data-attribute设置必要的索引值，如下所示：

<script>
$("#pageOneSubmission").click(function() {
$.ajax({
    type: "POST",
    url: ...,
    data:
        {
            ...
        },
    dataType: JSON,
    success: function(data) {
        if (!data.success) {
            console.log("Errors");
            $('#orderForm').bootstrapWizard('disable', $('#step2').data('tabindex'));
        } else {
            $('#orderForm').bootstrapWizard('enable', $('#step2').data('tabindex'));
            console.log("No Errors");
            $("#user-created-confirmation").html(data);

            swal({
                title: "Success!!",
                text: "Your order & patient profile are saved!",
                timer: 2500,
                showConfirmButton: false,
                type: "success"
            });



        }
    },
    error: function(jqXhr) {
        if (jqXhr.status === 422) {
            var err = JSON.parse(jqXhr.responseText);
            // this wouldn't work cause your redirecting the page, the loop
            // wouldn't loop...
            // window.location = $('#orderForm').attr('action');
            $.each(err, function(key, value) {
                $('input [name="'+ key +'"]').next().append("<p>Test</p>");
            });
        }
    }
}, function(){
    setTimeout(function() {

    })
  });
});

</script>
<div class="wizard order-form" id="orderForm">
    <div class="wizard-inner">
        <div class="connecting-line"></div>
        <ul class="nav nav-tabs" role="tablist">

            <li role="presentation" class="active">
                <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon glyphicon-scale"></i>
                    </span>
                </a>
            </li>

            <li role="presentation" class="disabled">
                <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon glyphicon-user"></i>
                    </span>
                </a>
            </li>
            <li role="presentation" class="disabled">
                <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon glyphicon-edit"></i>
                    </span>
                </a>
            </li>

            <li role="presentation" class="disabled">
                <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon-ok"></i>
                    </span>
                </a>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane active step" role="tabpanel" id="step1" data-tabindex="0">

                @include('pages.order.stepone')

        </div>
        <div class="tab-pane" role="tabpanel" id="step2" data-tabindex="1">

                @include('pages.order.steptwo')

        </div>
        <div class="tab-pane" role="tabpanel" id="step3" data-tabindex="2">

               @include('pages.order.stepthree')

        </div>
        <div class="tab-pane" role="tabpanel" id="complete" data-tabindex="3">

                <h3>Complete</h3>
                <p>You have successfully completed all steps.</p>

        </div>
        <div class="clearfix"></div>
    </div>
</div>