p:selectOneRadio with required="true"，如果提交未选中，不会将其p:selectOneRadio变为红色

Question

我有这个p:selectOneRadio:

<p:selectOneRadio 
    value="#{bean.val}"
    id="val"
    layout="custom"
    required="true"
>
    <f:selectItem itemLabel="" itemValue="A" />
    <f:selectItem itemLabel="" itemValue="B" />
</p:selectOneRadio>

和两个 p:radioButton。如果我提交表单 而没有 select 任何无线电，验证将停止提交，但是 p:radioButtons 不会变成红色。

确实我用浏览器的开发工具检查过，收音机有NO ui-state-error class.

由于我使用的是旧版本的 PrimeFaces，这似乎是一个错误。我不能 select 带有来自 UIComponent 的自定义验证器的收音机并手动设置 class 吗？

我正在使用 Primefaces 3.4.1 和 Mojarra 2.1.7

Answer 1

它已在 PrimeFaces 6.2 中修复。参见：https://github.com/primefaces/primefaces/issues/2464

OP 使用的是 PF 3.4 9 年前的版本。

Answer 2

我找到了解决办法。在提交按钮中输入：

onclick="setTimeout(function() { Util.checkCustomRadios(containersSel, endOfRadioNames); }, 350);"

这是Util.checkCustomRadios():

Util.checkCustomRadios = function (containersSelector, radioName) {
    "use strict";
    
    var errorClass = "ui-state-error";
    
    var $containers = $(containersSelector);
    var $container;
    var $radios;
    var radio;
    var checked;
    var $radioWrapper;
    var j;
    
    for (var i=0; i<$containers.length; i++) {
        $container = $containers.eq(i);
        $radios = $container.find('[name$="' + radioName + '"]:radio');
    
        if (! $radios.length) {
            continue;
        }
    
        checked = false;
    
        for (j=0; j<$radios.length; j++) {
            radio = $radios[j];
            if (radio.checked) {
                checked = true;
            }
        }
    
        $radioWrapper = $container.find('.ui-radiobutton-box');
        
        if (checked) {
            $radioWrapper.removeClass(errorClass);
        }
        else {
            $radioWrapper.addClass(errorClass);
        }
    }
};

containersSel可以是单个容器的id，也可以是多个容器的选择器，如#mytable tr.

endOfRadioNames 是收音机名称的最后一部分，在冒号之前。

根据需要调整 setTimeout 值:-)

p:selectOneRadio with required="true"，如果提交未选中，不会将其p:selectOneRadio变为红色

p:selectOneRadio with required="true", if you submit not selected, does not turn its p:selectOneRadio to red

validation

jsf

radio-button

primefaces