Question

我有一个多页面表单，用户使用Boostrap选项卡在页面之间导航。我想使tabing有条件，所以如果数据有问题，他们就无法选项卡到另一个页面。所以实际上我想拦截导航，检查有效性，然后如果OK，让导航继续。我尝试过使用带有event.preventDefault的点击处理程序，并且处理程序会运行，但无论如何都会发生标签。我认为做我想做的事情一定要直截了当，但我无法让它发挥作用。

Answer 1

反之亦然：

默认情况下，禁用除第一个标签（class="disabled"）以外的所有标签。
使用JavaScript / jQuery即时执行数据验证（由用户完成数据）。
如果验证规则通过，请启用其他选项卡（删除disabled类）。

Answer 2

类似于@bostaf建议您可以做这样的事情......

// disable all tabs
$('[data-toggle=tab]').click(function () {
  return false;}
).addClass("text-muted");

var validated = function(tab){
  tab.unbind('click').removeClass('text-muted');
}

//validate inputs on click of button
$('.btn-ok').click(function(){

    var allValid = true;
    // get each input in this tab pane and validate
    $(this).parents('.tab-pane').find('.form-control').each(function(i,e){

        // add some condition(s) to validate each input
        if (valid){
            // validation passed
            allValid = true;
        } else {
            // validation failed
            allValid = false;
        }

    });

    if (allValid) {
        var tabIndex = $(this).parents('.tab-pane').index();
        validated($('[data-toggle]').eq(tabIndex+1));
    }

});

http://www.bootply.com/PnCp18N14s

使用Bootstrap选项卡进行条件导航？

2 个答案: