如何在表单未验证时阻止用户进入多步骤表单下一步？

我完全懂你的困扰！现在你的多步骤表单虽然加了验证，但用户还是能直接跳转到下一步，咱们只需要在点击「下一步」按钮时，先校验当前步骤的表单是否合法，不合法就阻止切换操作就行。下面是修改后的完整代码和详细说明：

修改后的JavaScript代码 #

$(document).ready(function () {
    // 阻止点击禁用的tab
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var $target = $(e.target);
        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });

    $(".btn-primary").click(function (e) {
        // 获取当前激活的步骤面板ID
        var activeTabId = $('.tab-content .tab-pane.active').attr('id');
        // 检查当前步骤内的表单是否验证通过
        var isCurrentStepValid = $.validate().isValid('#' + activeTabId);
        
        if (!isCurrentStepValid) {
            // 验证不通过时，阻止默认点击行为，不执行下一步操作
            e.preventDefault();
            return false;
        }

        // 验证通过后，解锁下一个tab并切换
        var $active = $('.wizard .nav-wizard li.active');
        $active.next().removeClass('disabled');
        nextTab($active);
    });
});

function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}

$.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
        $('#country').suggestCountry();
    }
});

关键修改说明 #

1. 获取当前步骤面板：通过$('.tab-content .tab-pane.active').attr('id')拿到当前激活的步骤面板ID，确保只校验当前步骤的表单元素
2. 校验当前步骤：调用Form Validator的$.validate().isValid(selector)方法，检查当前步骤内的所有表单是否符合验证规则
3. 阻止无效跳转：如果验证不通过，用e.preventDefault()阻止按钮的默认点击行为，直接终止后续的tab切换逻辑

补全后的完整HTML（原片段不完整） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <section>
            <div class="wizard">
                <ul class="nav nav-wizard">
                    <li class="active">
                        <a href="#step1" data-toggle="tab">Billing Details</a>
                    </li>
                    <li class="disabled">
                        <a href="#step2" data-toggle="tab">Delivery Method</a>
                    </li>
                    <li class="disabled">
                        <a href="#step3" data-toggle="tab">Payment Info</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <!-- 步骤1：账单信息表单 -->
                    <div class="tab-pane active" id="step1">
                        <div class="form-group">
                            <label>Full Name</label>
                            <input type="text" name="fullname" class="form-control" data-validation="required">
                        </div>
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" class="form-control" data-validation="email required">
                        </div>
                        <button class="btn btn-primary">下一步</button>
                    </div>
                    <!-- 步骤2：配送方式表单 -->
                    <div class="tab-pane" id="step2">
                        <div class="form-group">
                            <label>Delivery Address</label>
                            <input type="text" name="address" class="form-control" data-validation="required">
                        </div>
                        <div class="form-group">
                            <label>Country</label>
                            <input type="text" id="country" name="country" class="form-control" data-validation="required">
                        </div>
                        <button class="btn btn-primary">下一步</button>
                        <button class="btn btn-default">上一步</button>
                    </div>
                    <!-- 步骤3：支付信息表单 -->
                    <div class="tab-pane" id="step3">
                        <div class="form-group">
                            <label>Card Number</label>
                            <input type="text" name="card_number" class="form-control" data-validation="required number">
                        </div>
                        <button class="btn btn-success">提交表单</button>
                        <button class="btn btn-default">上一步</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

额外提示 #

• 确保每个步骤的表单元素都添加了Form Validator的验证规则（比如data-validation="required"、data-validation="email"），这样isValid()方法才能正确校验
• 上一步按钮不需要验证逻辑，直接切换回上一个tab即可，不会影响验证流程

内容的提问来源于stack exchange，提问作者Rajnikant Bajpai