"label.error" 似乎总是出现在每个 bootstrap 选项卡上

Question

我不明白为什么 $('label.error') 会出现在每个 bootstrap 选项卡上，而该特定元素应该只显示在 1 个选项卡上。我有一个字段未在 bootstrap 选项卡上通过验证，因此带有 class 错误的 label 被附加到违规字段的 DOM 上。但是，我似乎无法让我的代码落在具有违规字段的特定选项卡上。我在下面的代码中做错了什么？ isErrorPresent 只应在 1 个特定选项卡上为真，但每个选项卡都显示为真...

$("#" + formId).validate({ignore:""}).form(); // ignore:"" allows for hidden fields to be validated as well

    $(".tab-content").find("div.tab-pane").each(function (index, tab) {
        var id = $(tab).attr("id");
        $('a[href="#' + id + '"]').click();

        alert('processing tab ' + id);

        var isErrorPresent = $('div.tab-pane, div.active').find('label.error').length > 0;

        alert(isErrorPresent);

//        if (isErrorPresent) {
//            alert("label.error detected...");
//            hasError = true;
//            return false; // Break .each loop and return to page
//        }
    });

Answer 1

没有看到更多标记，这就是我的想法：

您正在这样做：

var isErrorPresent = $('div.tab-pane, div.active').find('label.error').length > 0;

选择器中有一个逗号，表示您要检查 div.tab-pane && div.active

这是你想要的吗？也许你打算这样做（没有逗号也没有 space）：

var isErrorPresent = $('div.tab-pane.active').find('label.error').length > 0;

Answer 2

在@Red2678 的帮助下解决了这个问题（谢谢）...这就是现在对我有用的...

    // Check all tabs for errors & show first tab that has errors
    $(".tab-content").find("div.tab-pane").each(function (index, tab) {
        var id = $(tab).attr("id");
        $('a[href="#' + id + '"]').click();

        $("#" + formId).validate().form();

        var activeTab = $('div.tab-pane.active');

        var isErrorPresent = false;
        if ($(activeTab).find('label.error').length > 0) {
            isErrorPresent = $(activeTab).find('label.error').css('display') !== 'none';
        }

        if (isErrorPresent) {
            hasError = true;
            return false; // Break .each loop and return to page
        }
    });

"label.error" 似乎总是出现在每个 bootstrap 选项卡上

"label.error" seems to always be present on every bootstrap tab

javascript

jquery

tabs

twitter-bootstrap