Question

我有一个值列表，从我想要检查的值列表中，一些值意味着在那个corressponding文本框中将显示在bottom。否则文本框将被隐藏。我已经使用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"/>

隐藏的JavaScript和通过检查checkBox列表显示inputText：

    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。如何解决

Answer 1

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

<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和{{1来自上面的例子，因为它们已经是默认值）。否则，您需要在辅助bean的辅助方法中执行该作业。

仍然验证了JavaScript隐藏的必需JSF输入组件

1 个答案: