Question

我在多个bootstrap 3选项卡中有一个表单。当我点击提交按钮时，我使用

验证选项卡上的所有输入字段

$.validator.setDefaults({
    ignore: ""    
});

我用以下功能显示标签错误

function LoadTabWithError() {    
    $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
        var id = $(tab).attr("id");
        $('a[href="#' + id + '"]').tab('show');
    });    
}

$('#btnSubmit').click(function () {        
    LoadTabWithError();
}

除了一个场景外，一切正常。当我点击提交按钮时，说错误是在tab2上，它没有显示tab2。它只是在tab2中验证并显示错误。当我第二次再次点击提交时，它会转到标签2。

我认为函数LoadTabWithError（）;在验证表单之前调用。我应该在哪个事件中调用该函数，以便它从第一次开始显示正确的选项卡。

Answer 1

您的click()处理程序会干扰jQuery Validate插件的正常运行方式。这就是为什么开发人员提供了基于某些事件触发的各种回调函数。

如果您想在点击提交按钮时执行特殊操作并且表单仍然无效（例如显示标签页），那么您可以在.validate()方法中使用the invalidHandler callback option。

摆脱所有外部点击处理程序，摆脱LoadTabWithError功能，并在.validate()内正确利用the available options ...

$(document).ready(function() {

    $('#yourForm').validate({ // <- initialize the plugin on this form
        ignore: [],  // <- proper format to set ignore to "nothing"
        invalidHandler:  function(event, validator) {
            $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
                var id = $(tab).attr("id");
                $('a[href="#' + id + '"]').tab('show');
            });
        },
        // ... the rest of your validate() options
    });

});

这些选项也可以放在.setDefaults()中，但是，在这种情况下，当您在页面上只有一个表单时，.setDefaults()完全没有意义。在任何情况下，您仍然需要调用.validate()方法来初始化表单上的插件，除非您的ASP框架已经为您处理此初始化;那你别无选择......

$.validator.setDefaults({
    ignore: [],  // <- proper format to set ignore to "nothing"
    invalidHandler:  function(event, validator) {
        $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');
        });
    },
    // ... the rest of your options
});

验证失败时显示bootstrap 3选项卡

1 个答案: