如何验证每个带有 required="true" 的 <p:cellEditor><f:facet name="input"> 是否已填写？

Question

所以我有这个 JSF 代码，它将显示数据表的一列，并且每一列都必须填写。我还将 rowEdit 按钮放在右侧。因此，用户在填写数据之前，必须单击右侧的行编辑按钮。这是代码：

<p:panel header="Form Data">
    <p:panelGrid columns="1">
        <div class="grid-flex-column">
            <div class="col">
                <div class="box">
                    <div class="field-grid">
                        <h:outputLabel value="Fullname:" />
                        <h:outputLabel value="NIK:" />
                        <h:outputLabel value="Departement:" />
                        <h:outputLabel value="Division:" />
                        <h:outputLabel value="Position:" />
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="box">
                    <p:commandButton value="Add Column" action="#{dtStrukView.onAddNew()}"
                                                     update="form" styleClass="ui-button-outlined" />
                </div>
            </div>
            <div class="col">
                <div class="box">
                    <p:growl id="msgs" showDetail="true"/>
                    <p:dataTable value="#{dtStrukView.strukPembayaranList}" var="struk" editable="true">
                        <p:ajax event="rowEdit" listener="#{dtStrukView.onRowEdit}" update=":form:msgs"/>
                        <p:ajax event="rowEditCancel" listener="#{dtStrukView.onRowCancel}" update=":form:msgs"/>
                        <p:column headerText="Keterangan">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{struk.keterangan}" required="true" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{struk.keterangan}" required="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column headerText="Tanggal Kuitansi">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{struk.tanggalKuitansi}" required="true" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:datePicker value="#{struk.tanggalKuitansi}" monthNavigator="true" pattern="dd/MM/yyyy" required="true"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column headerText="Jumlah">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{struk.jumlah}" required="true" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{struk.jumlah}" required="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column headerText="Upload Tanda Tangan">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <p:fileUpload id="uploader1" mode="simple" skinSimple="true" styleClass="block mb-5"
                                                                                      title="my custom title" accept=".jpg,.jpeg,.png" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:fileUpload id="uploader2" mode="simple" skinSimple="true" styleClass="block mb-5"
                                                                                     title="my custom title" accept=".jpg,.jpeg,.png" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column style="width:6rem">
                            <p:rowEditor editTitle="Edit Row" cancelTitle="Cancel Edit" saveTitle="Save Row"/>
                        </p:column>
                    </p:dataTable>
                </div>
            </div>
        </div>
    </p:panelGrid>
    <div class="grid justify-content-end">
        <div class="col-4" >
            <div class="box" style="padding-left: 90%">
                <p:commandButton value="Save Data" update="form" action="#{dtStrukView.save}" icon="pi pi-check" validateClient="true" />
            </div>
        </div>
    </div>
</p:panel>

当用户点击顶部的“添加列”时，底部会显示更多列，并且每列都有行编辑按钮供用户填写数据。当用户单击行编辑按钮时，每一列都将是可编辑的，并且必须被要求填写。当有一列未填写时，将显示通知并告诉用户填写该列。如何让该栏位必须填写并显示我们自定义的信息？

Answer 1

<h:outputText>

不支持

required

属性。仅支持

UIInput

组件。

只需沿着

<h:inputHidden ... required="true">

为每个

<f:facet name="output">

添加一个

<h:outputText>

。

例如

<p:cellEditor>
    <f:facet name="output">
        <h:outputText value="#{struk.keterangan}" />
        <h:inputHidden value="#{struk.keterangan}" required="true" />
    </f:facet>
    <f:facet name="input">
        <h:inputText value="#{struk.keterangan}" required="true" />
    </f:facet>
</p:cellEditor>