how to apply javascript validation to all the dynamically generated input text area in jsf primefaces

Question

I want to apply javascript validation to dynamically generated input text area in jsf prime faces, but the problem I am encountering is that when many dynamic fields are generated, the validaton is getting applied to the last field only, but I want it for all the fields. How can I fix this?

This datatable is inside a form

<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>

function stepValidation() { var value = PF('stepTemplateWidget').jq.val(); if (value.length > 4) { PF('stepTemplateDialogeWidgetvalidate').show(); return false; } } — Shivam
where stepTemplateWidget is the widgetVar and stepTemplateDialogeWidgetvalidate is the dialog box — Shivam
the problem is that the id of widgetVar is dynamically changing, so the function stepvalidation is getting applied only to the last dynamically generated input text area, not to the previously generated fields. — Shivam

Vsevolod Golovanov Vsevolod Golovanov · Accepted Answer · 2017-04-14T08:37:04

Your each row's widgetVars should be globably (on a page) unique. When specifying widgetVar in an iterating component you should generate a different widgetVar on each iteration. See this answer to another question for an example.

Then your stepValidation should accept the widgetVar as a parameter, otherwise it doesn't know which row's widget it should use.

In the end you would have something like this in your inputText:

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

how to apply javascript validation to all the dynamically generated input text area in jsf primefaces

1 Answers