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

NeplatnyUdaj 发表于 Dev

无效数据

问题真的很简单。我有一个带有多个选项卡的选项卡视图：

<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并找到无效的组件，但是对于我认为应该是默认行为的事情来说似乎过于复杂。

无效数据

因此，我找到了一种方法。在ajax完成之后，我创建了一个oncomplete方法来搜索选项卡并选择正确的方法。首先，我不得不修改源代码（只是添加了id和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;
        });
    }

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。