javascript - 如何将javascript验证应用于jsf primefaces中所有动态生成的输入文本区域

我想将javascript验证应用于jsf主图中的动态生成的输入文本区域，但是我遇到的问题是，当生成许多动态字段时，validaton仅应用于最后一个字段，但是我希望所有领域。我怎样才能解决这个问题？

该数据表在表单内

<tr>
    <td colspan="2">
        <p:dataTable
            value="#{reconTemplate.stepsList}" var="sItem"
            rowIndexVar="rowIndex" id="multipleTable"
            emptyMessage="#{msg['label.req.add.step']}"
            styleClass="message_text_alert"
            style="padding-top:20px; width:100% !important;"
            scrollable="true" scrollHeight="400">
            <f:facet name="header">#{msg['label.modify.step.des']}</f:facet>

            <p:column
                style="width:100% !important; border-bottom:1px solid #ccc !important;padding-left: 10px !important">
                <p:outputLabel value="#{rowIndex+1} #{msg['label.step']}">
                </p:outputLabel>

                <p:inputText id="statusAll" type="text" styleClass="inputAttr"
                    widgetVar="stepTemplateWidget" immediate="true"
                    autocomplete="on" onkeyup="stepValidation()"
                    value="#{sItem.stepName}"
                    placeholder="#{msg['recon.templateStepPlaceholder']}"
                    style="width:460px; margin-left:5px !important;">
                </p:inputText>

                <p:commandLink value="#{msg['label.remove.step']}"
                    action="#{reconTemplate.removeSteps(sItem)}"
                    update=":formAll:multipleTable,:formAll:deleteButton"
                    ajax="true" styleClass="remove_bt" />

                <p:dataTable value="#{sItem.childStepsList}" var="sChildItem"
                    rowIndexVar="rowIndexChild" id="childTable"
                    emptyMessage="#{msg['label.add.child.step']}"
                    styleClass="message_text_alert"
                    style="padding-left:20px !important;">

                    <p:column>
                        <p:outputLabel value="#{rowIndex+1}.#{rowIndexChild+1}"
                            styleClass="fl_left  rec_label_input">
                        </p:outputLabel>
                        <p:selectOneMenu id="statusAll" filter="true"
                            filterMatchMode="contains" value="#{sChildItem.subStepName}"
                            styleClass="inputAttr"
                            style="width:430px; margin-left:5px !important; float:left !important;">
                            <f:selectItem itemValue=""
                                itemLabel="#{msg['recon.agentStepPlaceholder']}"
                                noSelectionOption="true" />
                            <f:selectItems value="#{sChildItem.allFieldChildSingle}" />
                            <!-- <p:ajax event="valueChange" listener="#{sChildItem.update}" update=""></p:ajax> -->
                        </p:selectOneMenu>
                        <!-- <h:outputText value="#{sChildItem.myChildValue}"/> -->
                        <p:commandLink value="#{msg['label.remove.agent.rule']}"
                            action="#{sItem.removeChildSteps(sChildItem)}"
                            update=":formAll:multipleTable:childTable" ajax="true"
                            styleClass="remove_bt fl_left"
                            style="margin-left:5px !important;" />
                    </p:column>
                </p:dataTable>
                <p:commandLink value="#{msg['label.add.agent.rule']}"
                    action="#{sItem.addChildSteps}" ajax="true"
                    actionListener="#{reconTemplate.setCurrentRowEdit(sItem)}"
                    styleClass="link_bt add_bt"
                    update=":formAll:multipleTable:childTable" rendered="true"
                    style="margin:0px 0px 0px 22px !important" />
            </p:column>
        </p:dataTable>
    </td>
</tr>

最佳答案

您的每一行的widgetVar（在页面上）应该是全球唯一的。在迭代组件中指定widgetVar时，应在每次迭代中生成一个不同的widgetVar。有关示例，请参见另一个问题的this answer。

然后，您的stepValidation应该接受widgetVar作为参数，否则它不知道应使用哪一行的窗口小部件。

最后，您的inputText中将包含以下内容：

widgetVar="stepTemplateWidget#{rowIndex}"
...
onkeyup="stepValidation('stepTemplateWidget#{rowIndex}')"