JavaScript에 의해 숨겨진 필수 JSF 입력 구성 요소는 여전히 유효합니다.

Question

일부 값을 확인하려는 값 목록의 값 목록이 있습니다. 해당 텍스트 상자가 bottom에 표시됩니다. 그렇지 않으면 텍스트 상자가 표시됩니다. 내가 자바 스크립트를 사용 하여이 과정을 수행했습니다. 하지만 내 문제는 필수 = true 특성을 사용하여 유효성을 검사해야합니다. 그러나 문제는 숨겨진 텍스트 상자도 유효하다는 것입니다.

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

입력 텍스트 상자 코딩 : 목록 값에 대한

Primefaces 페이지

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

숨겨진위한 자바 스크립트와 체크 박스의 목록 확인을 통해 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'; 
      } 
     } 

I을 primefaces 3.0 및 jsf 2.0을 사용하고 있습니다. 해결 방법

Answer 1

HTML DOM 트리 만 변경하고 JSF 구성 요소 트리는 변경하지 않습니다. JSF는 HTML 요소가 클라이언트 측에서 숨겨져 있다는 것을 전혀 모르고 있습니다. 대신 rendered 속성으로 JSF 구성 요소를 표시하거나 숨기고 클라이언트 ID를 <p:ajax update>에 포함해야합니다. valueOfItem10 당신이 JS에서 확인하는 노력으로 같은 인덱스 10 항목의 정확한 값입니다

<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')}" /> 

. 내가 이 hearLst이 제안한대로 List<String>이라고 가정합니다. 위의 예에서 불필요한 var, itemLabel 및 itemValue이 이미 기본값이므로 이미 제거했습니다. 그렇지 않으면 backing 빈의 도우미 메소드로 작업을 수행해야한다.