CODEWITHSUNDEEP
javascriptjsf-2primefaces
Muthu
Muthu

Reputation: 279

Required JSF input component which is hidden by JavaScript is still validated

I have a list of values from ,from the list of values i want to check some values means at that corressponding text box will show in bottom.Otherwise the text box will be hidden.I have done this process using javascript. But my issues is i have to validate using required=true attribute. But the problem is the hidden text box also validated.

Primefaces pages for List values:

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

Input Text Box coding:

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

JavaScript for hidden and show inputText through checking the list of checkBox:

    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 am using primefaces 3.0 and jsf 2.0. How to solve it

Upvotes: 0

Views: 2779

Answers (1)

BalusC
BalusC

Reputation: 1109635

You're changing only the HTML DOM tree and you're not changing the JSF component tree. JSF is not aware at all that the HTML element has been hidden in the client side. You need to show/hide the JSF component instead by its rendered attribute and include its client ID in the <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')}" />

where valueOfItem10 is the exact value of the item at index 10, like as you tried to check in JS. Note that I assume that knowAbt is a List<String>, exactly as your hearLst suggests (for which I have removed the superfluous var, itemLabel and itemValue from the above example as they are the defaults already). Otherwise you'd need to perform the job in a helper method of the backing bean instead.

Upvotes: 2

Related Questions