被 JavaScript 隐藏的必需 JSF 输入组件仍然有效答案

【问题标题】：Required JSF input component which is hidden by JavaScript is still validated被 JavaScript 隐藏的必需 JSF 输入组件仍然有效
【发布时间】：2012-07-04 11:54:23
【问题描述】：

我有一个值列表，从值列表中我想检查一些值意味着相应的文本框将显示在底部。否则文本框将被隐藏。我已经使用 javascript 完成了这个过程。但我的问题是我必须使用 required=true 属性进行验证。但问题是隐藏的文本框也被验证了。

列表值的 Primefaces 页面：

     <p:selectManyCheckbox onchange="checkValue();" value="#{volunteerBean.knowAbt}" layout="pageDirection" id="s" immediate="true" required="true" requiredMessage="Select how to konws about cv?" style="width:300px;height:170px;">
     <f:selectItems value="#{volunteerBean.hearLst}" var="he"  itemLabel="#{he}" itemValue="#{he}" />
     <p:ajax event="change" update="msg1111" />
     </p:selectManyCheckbox>

输入文本框编码：

    <p:inputText style="display:none;" id="searchEngine" value="#{volunteerBean.searchEngine}"><p:watermark for="searchEngine" value="Search Engine"/>

通过检查复选框列表来隐藏和显示inputText的JavaScript：

    function checkValue() {
    var chk = document.getElementById("volunteerForm:s:10");
             if (chk1.checked) {
            document.getElementById('volunteerForm:searchEngine').style.display='';
            }else {
    document.getElementById('volunteerForm:searchEngine').style.display='none';
            }
        }

我正在使用 primefaces 3.0 和 jsf 2.0。如何解决它

【问题讨论】：

标签： javascript jsf-2 primefaces

【解决方案1】：

您只更改了 HTML DOM 树，并没有更改 JSF 组件树。 JSF 根本不知道 HTML 元素已经隐藏在客户端。您需要通过其rendered 属性来显示/隐藏JSF 组件，并将其客户端ID 包含在<p:ajax update> 中。

<p:selectManyCheckbox ... value="#{volunteerBean.knowAbt}">
    <f:selectItems value="#{volunteerBean.hearLst}" />
    <p:ajax event="change" update="msg1111 searchEngine" />
</p:selectManyCheckbox>

<p:inputText id="searchEngine" ... rendered="#{volunteerBean.knowAbt.contains('valueOfItem10')}" />

其中valueOfItem10 是索引 10 处项目的确切值，就像您尝试签入 JS 时一样。请注意，我假设knowAbt 是List<String>，正如您的hearLst 所建议的那样（为此，我已经从上面的示例中删除了多余的var、itemLabel 和itemValue，因为它们已经是默认值了）。否则，您需要在支持 bean 的辅助方法中执行该工作。

【讨论】：