Question

I have a form which the user can dynamically add and remove a set of form fields (first name, last name, and email) from the form. That part is working fine, but of course I need some validation on those fields, and if I submit the form with just the first set of fields it works great, and I get validation on each field. Once I add the next set of fields and submit I get validation messages on the first set and only one field of the second. I am not really sure what is going on, but here is how .xhtml file looks:

<h:form>
    <ui:repeat var="i" value="#{bean.list}">
        <h:panelGrid columns="5" rowClasses="newRoow">
             <h:inputText id="firstName" value="#{i.first_name}"
             required="true" requiredMessage="Please enter a First Name" />
             <h:inputText id="lastName" value="#{i.first_name}"
             required="true" requiredMessage="Please enter a LastName" />
             <h:inputText id="email" value="#{i.first_name}"
             required="true" requiredMessage="Please enter an Email Address"> />
             <h:commandButton value="+">
                 <f:ajax event="click" render="@form" 
                 listener="#{bean.addItemFromList}" />
             </h:commandButton>
             <h:commandButton value="-">
                 <f:ajax event="click" render="@form" 
                 listener="#{bean.removeItemFromList(i)}" />             
             </h:commandButton>

             <h:message for="firstName" errorClass="warnings" showSummary="true" />
             <h:message for="lastName" errorClass="warnings" showSummary="true" />
             <h:message for="email" errorClass="warnings" showSummary="true" />
        </h:panelGrid>
    </ui:repeat>

    <h:commandButton value="Submit"
    actionListener="#{bean.someFunction}"
    action="nextPage" />
</h:form>

Any ideas as to why this would be failing?

With the first field set it is working great as you can see here: https://i.stack.imgur.com/P6mOv.png The validation is below each field.

With the second and following field sets it looks like this: https://i.stack.imgur.com/kZDHt.png or a bit different because it seems to validate one more field every time I press the add button.

Answer 1

I later figured out that this wasn’t a problem with the code/markup I had written for this problem, but instead from a .js file that was included. This .js had some code in it that was messing with all elements with a class="warnings" which is generated from the <h:messages /> tags.