I have the following jsp test page with three input fields. The first input field is a simple text input with some validation. The other two inputs are drop down lists with no validation. When a selection is made in the first drop down an ajax call is made which updates the values in the second drop down list.
This works fine normally. However if the submit button is invoked and there is a validation error message. From that point on the ajax calls stop working making the form look very broken. This happens even though email field is not submitted as part of the ajax call. Is there anyway fix this ?
<h:form>
<a4j:outputPanel ajaxRendered="true">
<h:messages globalOnly="true"/>
</a4j:outputPanel>
<h:panelGrid columns="3" width="800">
<h:outputLabel for="emailField" value="Email"/>
<h:inputText id="emailField" value="#{validateTestBackingBean.email}" required="true">
<t:validateEmail/>
</h:inputText>
<a4j:outputPanel ajaxRendered="true">
<h:message for="emailField"/>
</a4j:outputPanel>
<h:outputLabel for="selectBox1" value="select1"/>
<h:selectOneMenu id="selectBox1" value="#{validateTestBackingBean.selectedItem1}">
<f:selectItems value="#{validateTestBackingBean.itemList1}"/>
<a4j:support event="onchange" action="#{validateTestBackingBean.changeOptions}"
ajaxSingle="true" reRender="selectBox2"/>
</h:selectOneMenu>
<a4j:outputPanel ajaxRendered="true">
<h:message for="selectBox1"/>
</a4j:outputPanel>
<h:outputLabel for="selectBox2" value="select1"/>
<h:selectOneMenu id="selectBox2" value="#{validateTestBackingBean.selectedItem2}">
<f:selectItems value="#{validateTestBackingBean.itemList2}"/>
</h:selectOneMenu>
<a4j:outputPanel ajaxRendered="true">
<h:message for="selectBox2"/>
</a4j:outputPanel>
<h:panelGroup/>
<h:commandButton value="Submit" action="success"/>
<h:panelGroup/>
</h:panelGrid>
</h:form>
