jsf 2 - how to add ui-state-error to p:selectOneRadio on failure -


i'd make sure p:selectoneradio highlighted in way when required, nothing selected. currently, there error message added top of page, no error class added component. makes more difficult users able find problem when there lot of inputs.

edit: added additional info in example

example

<div class="options-item r"> <fieldset class="default-radio">     <legend for="default_radio_id" class="legend-txt">         <span class="required c">*</span>#{msg['label.legend']}     </legend>     <p:selectoneradio id="default_radio_id"                   label="#{msg['label']}" required="true"                   layout="custom"                   value="#{bean.value.defaultisfalse}">         <f:selectitem itemlabel="#{msg['label.option1']}"                       itemvalue="#{true}"/>         <f:selectitem itemlabel="#{msg['label.option2']}"                       itemvalue="#{true}"/>     </p:selectoneradio>     <h:panelgrid styleclass="some_class another_radio_class" columns="4">         <p:radiobutton id="opt1aa" for="default_radio_id" itemindex="0"/>         <h:outputlabel styleclass="txt" for="opt1aa"                        value="#{msg['label.option1']}"/>          <p:radiobutton id="opt1bb" for="default_radio_id" itemindex="1"/>         <h:outputlabel styleclass="txt" for="opt1bb"                        value="#{msg['label.option2']}"/>     </h:panelgrid>      <!-- other non relevant things? --> </fieldset> </div> 

i'm using primefaces 3.5

is there way make sure kind of error class, such 'ui-state-error', gets added select radio or there other pattern used identify missing radio selections?

edit2: added additional bean definition solution

for don't know kind of modification you'd need make bean definition solution working.

private uiinput radiobutton; public uiinput getradiobutton() {     return radiobutton; }  public void setradiobutton(uiinput radiobutton) {     this.radiobutton = radiobutton; }  

edit3: added comments on edit2 , complete solution

it turns out don't need define uiinput in preexisting backing bean binding latch to. you'll need edit 1 of existing beans if need access within bean self.

solution:

<div class="options-item r"> <fieldset class="default-radio">     <legend for="default_radio_id" class="legend-txt">         <span class="required c">*</span>#{msg['label.legend']}     </legend>     <p:selectoneradio id="default_radio_id" binding="#{anyunusedbeanname}"                   label="#{msg['label']}" required="true"                   layout="custom"                   value="#{bean.value.defaultisfalse}">         <f:selectitem itemlabel="#{msg['label.option1']}"                       itemvalue="#{true}"/>         <f:selectitem itemlabel="#{msg['label.option2']}"                       itemvalue="#{true}"/>     </p:selectoneradio>     <h:panelgrid styleclass="some_class another_radio_class #{anyunusedbeanname.valid ? '' : 'ui-state-error'}" columns="4">         <p:radiobutton id="opt1aa" for="default_radio_id" itemindex="0"/>         <h:outputlabel styleclass="txt" for="opt1aa"                        value="#{msg['label.option1']}"/>          <p:radiobutton id="opt1bb" for="default_radio_id" itemindex="1"/>         <h:outputlabel styleclass="txt" for="opt1bb"                        value="#{msg['label.option2']}"/>     </h:panelgrid>      <!-- other non relevant things? --> </fieldset> </div> 

i can reproduce it. rendering bug of primefaces; forgot set ui-state-error on <p:radiobutton> in case parent <p:selectoneradio> failed validation. recommend report issue them, if not done yet else.

in meanwhile, apart rewriting , overriding renderer, best bet manually specify style class follows:

<p:selectoneradio binding="#{defaultradioid}" ... /> ... <p:radiobutton ... styleclass="#{defaultradioid.valid ? '' : 'ui-state-error'}" /> 

the trick here bind component view it's elsewhere available uiinput instance on can check uiinput#isvalid() property.

finetune look'n'feel css .ui-radiobutton.ui-state-error {} if necessary.


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -