Bean values not updating in validation in jsf - jsf

Question

I have a scenario where i have a form with fields mobile phone, home phone and office phone. each field has a corresponding radio button named preferred line. only one or the three radio is selectable. and when selected alone the field should be required. so i framed the code like below.
<table class="addaccount-table" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td><label><h:outputText value="Home Phone" /></label></td>
<td><h:inputText id="homePhone" maxlength="14"
value="#{Controller.ContactPageBean.homePhone}"
required="#{not empty Controller.ContactPageBean.homePhoneSelected}"
requiredMessage="Preferred phone is required">
</h:inputText> <br /> <h:message for="homePhone" style="color:red"></h:message></td>
<td><h:selectOneRadio id="homePhoneSelectedId"
styleClass="addacountradio"
value="#{Controller.ContactPageBean.homePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="homePhone" />
</h:selectOneRadio></td>
</tr>
<tr>
<td><label><h:outputText value="Office Phone" /></label></td>
<td><h:inputText id="officePhone" maxlength="14"
value="#{Controller.ContactPageBean.officePhone}"
required="#{not empty Controller.ContactPageBean.officePhoneSelected}"
requiredMessage="Preferred phone is required">
</h:inputText> <br /> <h:message for="homePhone" style="color:red"></h:message></td>
<td><h:selectOneRadio id="officePhoneSelectedId"
styleClass="addacountradio"
value="#{Controller.ContactPageBean.officePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="officePhone" />
</h:selectOneRadio></td>
</tr>
<tr>
<td><label><h:outputText value="Mobile Phone" /></label></td>
<td><h:inputText id="mobilePhone" maxlength="14"
value="#{Controller.ContactPageBean.mobilePhone}"
required="#{not empty Controller.ContactPageBean.mobilePhoneSelected}"
requiredMessage="Preferred phone is required">
</h:inputText> <br /> <h:message for="mobilePhone" style="color:red"></h:message></td>
<td><h:selectOneRadio id="mobilePhoneSelectedId"
styleClass="addacountradio"
value="#{Controller.ContactPageBean.mobilePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="mobilePhone" />
</h:selectOneRadio></td>
</tr>
Now when i clicked the three radio button in row and submit i am getting required error message for the three fields. I expected only the error message which the radio button was currently selected. please help.

Answer 1

You mistype h:message of officePhone as <h:message for="homePhone" style="color:red"> while it should be <h:message for="officePhone" style="color:red"> .
Also, I suggest you edit all <f:selectItem itemValue="Home" itemLabel="Preferred" /> except homephone. For example <f:selectItem itemValue="Office" itemLabel="Preferred" />
I tried this and everything works, check this:
<h:form>
<table class="addaccount-table" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td>
<label><h:outputText value="Home Phone" /></label>
</td>
<td><h:inputText id="homePhone" maxlength="14"
value="#{ContactPageBean.homePhone}"
required="#{not empty ContactPageBean.homePhoneSelected}"
requiredMessage="Home phone is required">
</h:inputText> <br />
<h:message for="homePhone" style="color:red"></h:message>
</td>
<td>
<h:selectOneRadio id="homePhoneSelectedId"
styleClass="addacountradio"
value="#{ContactPageBean.homePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="homePhone" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>
<label><h:outputText value="Office Phone" /></label>
</td>
<td>
<h:inputText id="officePhone" maxlength="14"
value="#{ContactPageBean.officePhone}"
required="#{not empty ContactPageBean.officePhoneSelected}"
requiredMessage="Office phone is required">
</h:inputText> <br />
<h:message for="officePhone" style="color:red"></h:message>
</td>
<td>
<h:selectOneRadio id="officePhoneSelectedId"
styleClass="addacountradio"
value="#{ContactPageBean.officePhoneSelected}">
<f:selectItem itemValue="Office" itemLabel="Preferred" />
<f:ajax render="officePhone" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>
<label><h:outputText value="Mobile Phone" /></label>
</td>
<td>
<h:inputText id="mobilePhone" maxlength="14"
value="#{ContactPageBean.mobilePhone}"
required="#{not empty ContactPageBean.mobilePhoneSelected}"
requiredMessage="Mobile phone is required">
</h:inputText> <br />
<h:message for="mobilePhone" style="color:red"></h:message>
</td>
<td>
<h:selectOneRadio id="mobilePhoneSelectedId"
styleClass="addacountradio"
value="#{ContactPageBean.mobilePhoneSelected}">
<f:selectItem itemValue="Mobile" itemLabel="Preferred" />
<f:ajax render="mobilePhone" />
</h:selectOneRadio>
</td>
</tr>
</table>
<h:commandButton value="submit" action="#{ContactPageBean.doSome()}"/>
</h:form>
I changed Controller.ContactPageBean as ContactPageBean for simplicity.
Finally, maybe it's better to use checkbox instead of radioButton,isn't it?