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