PrimeFaces SelectCheckboxMenu设置required="true"时“全取消”功能失效

上下文 #

在JSF视图中使用PrimeFaces的<p:selectCheckboxMenu>组件，绑定到List且标记为必填项，组件下方渲染当前选中项并支持通过链接删除单个选项，代码如下：

<h:panelGroup layout="block" id="wsdSelectorEstados" class="multiSelectDropdownWrapper">
  <p:selectCheckboxMenu id="multiSelectEstadoMenu"
                        required="true"
                        requiredMessage="Selecione uma ou mais opções"
                        widgetVar="multiSelectEstadoMenu"
                        value="#{wsdConsultaRecebimentos.recebimentosPesquisa.estadoRecebimentSelected}"
                        label="Selecione uma ou mais opções"
                        filter="true"
                        filterMatchMode="startsWith"
                        panelStyleClass="multi-select-container">
      <f:selectItems id="wsdItemsEstados"
                     value="#{wsdConsultaRecebimentos.estadoRecebimentoList}"
                     var="estados"
                     itemDisabled="false"
                     itemLabel="#{estados.label}"
                     itemValue="#{estados}" />
      <p:ajax event="change" update="selectedItemText" />
      <p:ajax event="toggleSelect" update="selectedItemText" />
  </p:selectCheckboxMenu>

  <p:message id="FormMultiSelectEstadoMessage" display="text" for="multiSelectEstadoMenu" />

  <h:panelGroup id="selectedItemText" styleClass="selected-items-wrapper">
    <p:outputPanel id="selectedItemTextWrapper"
                   rendered="#{not empty wsdConsultaRecebimentos.recebimentosPesquisa.estadoRecebimentSelected}">
      <ul class="selected-items">
        <ui:repeat value="#{wsdConsultaRecebimentos.recebimentosPesquisa.estadoRecebimentSelected}" var="estado">
          <li>
            <p:commandLink process="@this" immediate="true"
                           action="#{wsdConsultaRecebimentos.removeEstadoSelected(estado)}"
                           styleClass="selected-opt"
                           update="@form:wsdSelectorEstados">
              <span>#{estado.label}</span>
            </p:commandLink>
          </li>
        </ui:repeat>
      </ul>
    </p:outputPanel>
  </h:panelGroup>
</h:panelGroup>

核心问题 #

用户点击组件内置的“全取消”头部操作，或手动取消所有选项时，因为组件设置了required="true"，JSF会在转换/验证阶段触发必填验证失败，导致模型未更新——服务器端仍保留之前的选择，UI重新渲染旧状态，无法实际清空列表，仅会显示必填提示。

需求：允许用户执行“全取消”操作清空选择，仅在最终表单提交时触发必填验证。

以下是几种实用的处理方式，可根据项目环境选择：

1. 动态控制必填验证状态 #

修改组件的required属性为EL表达式，根据请求参数临时关闭验证：

required="#{not param.skipValidation}"

然后通过JS监听“全取消”按钮点击，发送带参数的请求：

PF('multiSelectEstadoMenu').jq.on('click', '.ui-selectcheckboxmenu-header-close', function() {
  PF('multiSelectEstadoMenu').ajaxRequest({
    params: {skipValidation: true},
    update: '@form:wsdSelectorEstados'
  });
});

这样点击全取消时，临时跳过必填验证，允许模型更新为空列表。

2. 利用PrimeFaces AJAX的跳过验证属性（PrimeFaces 8+） #

如果使用PrimeFaces 8及以上版本，直接在toggleSelect事件的<p:ajax>中添加skipValidation="true"，同时更新组件所在的容器：

<p:ajax event="toggleSelect" update="selectedItemText wsdSelectorEstados" skipValidation="true" />

全取消触发的toggleSelect事件会跳过验证，直接更新模型状态。

3. 后端手动清空列表 #

添加一个隐藏的命令按钮，绑定后端清空方法并设置immediate="true"跳过验证：

<p:commandButton id="clearAllBtn" style="display:none;" 
                 action="#{wsdConsultaRecebimentos.clearAllEstados}"
                 immediate="true" update="@form:wsdSelectorEstados" />

后端Bean方法：

public void clearAllEstados() {
  recebimentosPesquisa.getEstadoRecebimentSelected().clear();
}

然后通过JS监听全取消按钮点击，触发隐藏按钮：

PF('multiSelectEstadoMenu').jq.on('click', '.ui-selectcheckboxmenu-header-close', function() {
  PF('clearAllBtn').jq.click();
});

4. 自定义条件验证器 #

编写自定义验证器，仅在表单提交时触发必填验证，AJAX操作时跳过：

@FacesValidator("conditionalRequiredValidator")
public class ConditionalRequiredValidator implements Validator {
  @Override
  public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
    Map<String, String> params = context.getExternalContext().getRequestParameterMap();
    // 判断是否为表单提交请求，替换为实际提交按钮的ID参数
    boolean isFormSubmit = params.containsKey("submitBtnId");
    
    if (isFormSubmit) {
      List<?> selectedItems = (List<?>) value;
      if (selectedItems == null || selectedItems.isEmpty()) {
        throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_ERROR, "Selecione uma ou mais opções", null));
      }
    }
  }
}

替换组件的required="true"为自定义验证器：

<f:validator validatorId="conditionalRequiredValidator" />

内容的提问来源于stack exchange，提问作者Renan Mafort