Bootstrap vallidator not working for jquery dialog

I have the following bootstrap validations working fine for my form with id="validateForm".

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
</head>
<body>
<div id="wrapper">
   
    <div id="page-wrapper">
        <div class="container-fluid">
            <!-- Page Heading -->
            <div class="row" id="main" >
                <div class="col-sm-12 col-md-12 well " style="padding:0px;"   id="content" >
                    <h3>My heading!<img style="margin: 8px;" src="images/Sign-Info-icon.png" width="20" height="20" id="informationIcon" /></h3> 
                </div>
                <!-- BEGIN Bootstrap form testing-->
               <form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
                    <div class="row">
                        
                        <div class="col-md-offset-1 col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <label class="control-label">Select your company:</label>
                                    <select id = "companylist" name="userCompanylist" class="form-control" >
                                    <option value=" " >Please select your company</option>
                                    </select><span class="input-group-btn"><button id="myBtn" type="button" style="margin-top:27px;" class="btn btn-success">Add New Company</button></span>
                                </div>
                              
                            </div>
                          </div>
                       <div class="col-md-offset-1 col-md-4">
                        <div class="form-group">
                                <label class="control-label">Select your employee sets:</label>
                                <select id = "employeeSetlist" name="employeeSets" class="form-control" >
                                    <option value=" " >Please select employee set</option>
                                    
                                </select>
                            </div>
                                                     
                        </div>
                    </div>
                    
                   
                   </form>
                <!-- END form testing-->
        </div>
        <!-- /.container-fluid -->
        <!-- For Dialog Begins -->

        <div id="add_dialog" title="Add New Company" style="display:none;">
          <form id="validateDialog">
            <p>
              <b>Name:</b><br/>
              <input id="companyName" type="text" name="nameOfCompany" />
            </p>
            <p><b>Description:</b>
               <!-- <input id = "companyDescription" type="text" name="description" /> -->
               <textarea id="companyDescription" name="companyDescription" rows="4" cols="20"></textarea>
            </p>
          </form>
        </div>
        <!-- For Dialog Code Ends -->

    </div>
    <!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<
<script type="text/javascript">
            //Initialize function when document 'is ready'
         $(document).ready(function() {
              	 
           //BEGIN FORM Validations
            $('#validateForm').bootstrapValidator({
	          feedbackIcons: {
	            valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
	        	},
		        fields: {
		
		            employeeSets: {
		                validators: {
		                    notEmpty: {
		                        message: 'Please select a employee set'
		                    }
		                }
		            },
		            userCompanylist: {
		                validators: {
		                    notEmpty: {
		                        message: 'Please select a company'
		                    }
		                }
		            }
		            ,
		            
		        }
            });

            //END FORM Validations
            
            //BEGIN DIALOGE FORM validations
            /* $('#validateDialog').bootstrapValidator({
	          feedbackIcons: {
	            valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
	        	},
		        fields: {
		
		        	nameOfCompany: {
		                validators: {
		                    notEmpty: {
		                        message: 'Please enter company name'
		                    }
		                }
		            },
		            companyDescription: {
		                validators: {
		                    notEmpty: {
		                        message: 'Please enter description'
		                    }
		                }
		            }
		            ,
		            
		        }
            }); */
            
            
            //END DIALOGE FORM validations
    });
            
</script>
</body>
</html>

I am trying to do the same validations for the jQuery dialog as well. and hence I added the validations for the form with id="validateDialog". The block of code that I added is as follows (this is commented out in the above code):

//BEGIN DIALOG FORM validations
             $('#validateDialog').bootstrapValidator({
	          feedbackIcons: {
	            valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
	        	},
		        fields: {
		
		        	nameOfCompany: {
		                validators: {
		                    notEmpty: {
		                        message: 'Please enter company name'
		                    }
		                }
		            },
		            companyDescription: {
		                validators: {
		                    notEmpty: {
		                        message: 'Please enter description'
		                    }
		                }
		            }
		            ,
		            
		        }
            }); 
            
            
            //END DIALOG FORM validations

And it started throwing following error in the console.This error is shown i n the console as soon as the page loads and I haven’t even opened the dialog at this point of time.How to fix this?

Uncaught InternalError: too much recursion
    jQuery 5
    _getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
    _getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
    _getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
    _getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
    _getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12

Screenshot below:

Note: I have removed lot of libraries related declarations for brevity purpose.

It would be nice if you could upload on a test server the code to reproduce the error. That said I changed your

<button id="myBtn" type="button" .....>

to

<button id="myBtn" type="submit" ...>

Thanks Corobori. I created a JS fiddle as shown below which is showing my error: