Question

我想确保p：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>

Answer 1

我可以重现它。它看起来只是PrimeFaces的渲染错误;如果父ui-state-error验证失败，他们忘记在<p:radioButton>上设置<p:selectOneRadio>。我向他们推荐report这个问题，如果尚未由其他人完成的话。

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

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

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

如果有必要的话，Finetune会用CSS .ui-radiobutton.ui-state-error {}来表达。

Answer 2

如果您正在执行此服务器端，最好的办法是访问相应的UIComponent（通过绑定或static method）。然后，您可以将其转换为UIInput（如有必要），然后调用setValid()方法并将其传递给false。

如何在失败时将ui-state-error添加到p：selectOneRadio

2 个答案: