Command button does not invoke action after updating section by f:ajax

Question

When I click on <h:commandButton> (without selecting item from <h:selectOneMenu>), I'm able to invoke method of bean which redirects me to same page as well as server side validations works perfectly.

However, when I select item from <h:selectOneMenu>, it will render input text and <h:selectOneMenu> components dynamically via <f:ajax> and after that click on <h:commandButton>, I'm not able to invoke bean method as well as server side validations.

I also tried <c:forEach> instead of <ui:repeat>.

<h:form id="prodForm" enctype="multipart/form-data" role="form" class="form-horizontal" > 

    <div class="form-group">
        Product Name:
        <input type="text" class="form-control" style="#{component.valid? 'border-color:':'border-color:red;'}" 
               value="#{clientProCtr.cpm.prodName}"
               id="prod_name" jsfc="h:inputText" required="true" 
               requiredMessage="Product name Required" 
               validatorMessage="Product Name should be between 3 to 50 characters">
            <f:validateLength minimum="3" maximum="50"/>
        </input>
        <h:messages style="color: red;" class="list-unstyled" for="prod_name" />
    </div>

    <div class="col-lg-6">
        <h:selectOneMenu id="select_category" required="true" requiredMessage="Please select a category" value="#{clientProCtr.selectedCat}" >
            <f:selectItem itemLabel="--Select Category--" noSelectionOption="true" /> 
            <f:selectItems value="#{clientProCtr.clientCat}" var="i" itemValue="#{i.catMasId}" itemLabel="#{i.catName}" /> 
            <f:ajax event="change" 
                execute="@this" 
                render="featureList"
                listener="#{clientProCtr.displayFeatures()}" />
        </h:selectOneMenu>
        <h:message style="color: red;" class="list-unstyled" for="select_category" />
    </div>

    <h:panelGroup id="featureList">    
        <ui:repeat value="#{clientProCtr.clientFeatures}" var="j">
        <div class="form-group col-lg-6">
            <div class="form-group">
                <label class="col-lg-4 control-label" for="required">#{j.featureLabel}</label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="required" alt="textValue" jsfc="h:inputText" />
                </div>
                <div class="col-lg-4">
                    <h:selectOneMenu class="12">
                        <f:selectItem itemValue="0" itemLabel="--Select Unit--"></f:selectItem>
                        <f:selectItems value="#{clientProCtr.displayUnits(j.featureMasId)}" var="k" itemValue="#{k.unitFeatureId}" itemLabel="#{k.unitName}"></f:selectItems>
                    </h:selectOneMenu>
                </div>
            </div>
        </div>
        </ui:repeat>
    </h:panelGroup>

    <div class="col-lg-1" style="float: right">
        <h:commandButton id="btnAdd" class="btn btn-info nostyle" value="Add" action="#{clientProCtr.addProduct()}" />
        <div class="marginB10"></div>
    </div><!-- End .span4 -->
</h:form>