I have a problem when I click the add button, I want to re-render the "addPanel", I have a popup that confirm the submittion. After the user click yes, the product name is added. Afterward I want to re-render addPanel, when I do, it renders the rich:panel again, however it submits the form again!!!!, and it gives user the requiredMessage error "Opensource product is required"

Any suggestions will be appreciated.

<h:form>

<!---------------------------------a4j function call-------------------------------------------->

<a4j:jsFunction name="add" action="#{osView.add}"

                                    render="addPanel"

                                    oncomplete="#{rich:component('confirmPane')}.hide();" />

<!--------------------------------Confirm Yes/NO------------------>

<rich:popupPanel id="confirmPane" autosized="true">

                        <f:facet name="header">

                            <h:outputText value="Confirm"/>                               

                        </f:facet>

                        <br/>

                        Are you sure you want to add this to your OS list?    

                        <br/>

                        <br/>

                        <br/>

                        <div  style="margin:0 auto;width:40%">

                            <a4j:commandButton value="Yes" onclick="add()"/>  

                            <a4j:commandButton value="No"

                                               onclick="#{rich:component('confirmPane')}.hide(); return false;" />

                        </div>

                    </rich:popupPanel>  

<!--------------------------------Add panel------------------>

<rich:panel id="addPanel">

                        <h:outputText style="color: rgb(107, 115, 133); font-family: 'Arial','Helvetica',sans-serif; font-size: 12px; font-style: italic; font-weight: bold;"

                                      value="Add opensource product"/>

                        <hr/>                      

                        <h:panelGrid columns="3" style="background-color: #F3F7FD;width:100%;">

                            <h:outputText value="OS product:" style="font-weight: bold;width:40px"/>

                            <h:inputText style="width:180px" id="os" value="#{osView.osyModel.name}" onfocus="this.select()" onclick="this.select()"

                                         required="true" requiredMessage="Opensource product is required" />                           

                            <h:outputText value="Select OS product from the list"

                                          style="font-style: italic;font-weight: bold;width:30px"/>

                        </h:panelGrid>

                        <h:inputHidden id="osID" value="#{osView.osyModel.id}" required="true" requiredMessage="You have to select OS from the drop down list"  />

                        <br/>

                        <h:outputText style="color: rgb(107, 115, 133); font-family: 'Arial','Helvetica',sans-serif; font-size: 12px; font-style: italic; font-weight: bold;"

                                      value="Symptoms/Reactions"/>

                         <rich:message for="os"/>

                        <rich:message for="osID"/>

                        <hr/>

                        <br/>

                        <div align="left">                          

                            <a4j:commandButton value="Add" style="width:100px;color:black"

                                               oncomplete="#{(osView.osyModel.id==0?'return false;':'')} #{rich:component('confirmPane')}.show()" render="confirmPane" />

                        </div>

                        <br/><br/><br/>

         </rich:panel>

</h:form>