1

我想确保 ap:selectOneRadio 在需要时以某种方式突出显示,但没有选择任何内容。目前,页面顶部会添加错误消息,但不会向任何组件添加错误类。这使得用户在有大量输入时更难发现问题。

编辑:在示例中添加了附加信息

例子

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

    <!-- some other non relevant things? -->
</fieldset>
</div>

我正在使用primefaces 3.5

有什么方法可以确保将某种错误类(例如“ui-state-error”)添加到选择单选中,或者是否有其他模式用于识别丢失的单选选择?

Edit2:为解决方案添加了额外的 bean 定义

对于那些不知道这是您需要对 bean 定义进行修改以使解决方案工作的人。

private UIInput radioButton;
public UIInput getRadioButton() {
    return radioButton;
}

public void setRadioButton(UIInput radioButton) {
    this.radioButton = radioButton;
} 

Edit3:在 Edit2 上添加了评论和完整的解决方案

事实证明,您不需要在任何预先存在的支持 bean 中定义 UIInput 即可将绑定锁定到。如果您需要从 bean 内部访问它,您只需要编辑现有 bean 之一。

解决方案:

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

    <!-- some other non relevant things? -->
</fieldset>
</div>
4

2 回答 2

0

我可以重现它。它看起来只是 PrimeFaces 的渲染错误;如果父母验证失败,他们会忘记ui-state-error启动。如果其他人尚未完成,我建议向他们报告此问题。<p:radioButton><p:selectOneRadio>

同时,除了重写和覆盖渲染器之外,最好的办法是手动指定样式类,如下所示:

<p:selectOneRadio binding="#{defaultRadioId}" ... />
...
<p:radioButton ... styleClass="#{defaultRadioId.valid ? '' : 'ui-state-error'}" />

这里的技巧是将组件绑定到视图,以便它在其他地方作为UIInput实例可用,您可以在其上检查UIInput#isValid()属性。

如有必要,使用 CSS 微调外观.ui-radiobutton.ui-state-error {}

于 2013-08-14T19:49:24.170 回答
-1

如果您在做这个服务器端,最好的办法是访问相应的UIComponent(通过绑定或静态方法)。然后,您可以将其转换为UIInput(如有必要),然后调用setValid()方法并传递它false

于 2013-08-13T01:46:23.973 回答