验证失败时显示引导程序 3 选项卡

Question

我有一个跨多个引导程序 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
});