使用无效输入切换到 tabView 中的选项卡答案

【问题标题】：Switch to tab in tabView with invalid input使用无效输入切换到 tabView 中的选项卡
【发布时间】：2015-01-24 22:18:09
【问题描述】：

问题其实很简单。我有一个带有多个标签的标签视图：

<h:form>
    <p:tabView id="tabView">
        <p:tab>
            <p:inputText required="true"></p:inputText>
        </p:tab>
        <p:tab>
            <p:inputText required="true"></p:inputText>
        </p:tab>
    </p:tabView>
    <p:commandButton value="submit" action="#{myBB.submit}" update="tabView"/>
</h:form>

当客户端验证失败时，我想要切换到缺少字段的选项卡。我认为这一定是选项卡中表单的常见用例，但我找不到任何解决方案。

我唯一能想到的是在提交按钮上调用一些 oncomplete 操作，该操作将通过 DOM 并找到无效组件，但对于我认为应该是默认行为的事情来说，这似乎过于复杂。

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

所以我找到了一种方法来做到这一点。 ajax 完成后，我创建了一个 oncomplete 方法来搜索选项卡并选择正确的选项卡。首先我不得不稍微修改一下源代码（只是添加了 ids 和 widgetVar）：

<h:form>
  <p:tabView id="tabView" widgetVar="tabViewWv">
    <p:tab id="tab1">
        <p:inputText required="true"></p:inputText>
    </p:tab>
    <p:tab id="tab2">
        <p:inputText required="true"></p:inputText>
    </p:tab>
  </p:tabView>
  <p:commandButton ... oncomplete="switchToInvalidTab()"/>
</h:form>

和javascript：

    function switchToInvalidTab() {
        var lastIndex = 0;
        var tabParent = '#mainForm\\:tabView\\:';
        var tabs = ['tab1', 'tab2']; //can add more, but the order must be the same as in form
        tabs.some(function (tabName){
            if ($(tabParent + tabName)) { //tab may not exist in my app
                if ($(tabParent + tabName).find(':input').hasClass('ui-state-error')){
                    PF('tabViewWv').select(lastIndex);
                    return true;
                }
                lastIndex++;
            }
            return false;
        });
    }

我的应用程序中有更多选项卡，其中一些有时不存在，此代码适用于所有情况。也许它可以帮助某人

【讨论】：