Question

问题很简单。我有一个包含多个标签的tabview：

<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>

我希望在客户端验证失败时切换到缺少字段的选项卡。我认为这必须是标签中表单的常见用例，但我找不到任何解决方案。

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

Answer 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;
        });
    }

我的应用中有更多标签，有些标签有时不存在，此代码适用于所有情况。也许它有助于某人

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

1 个答案: