Bootstrap验证程序不适用于对话框并抛出jQuery.Deferred异常：太多递归错误

如何解决Bootstrap验证程序不适用于对话框并抛出jQuery.Deferred异常：太多递归错误

我有以下代码，且引导程序验证工作正常。

工作代码段：

$(document).ready(function() {
  //BEGIN FORM Validations
  $('#validateForm').bootstrapValidator({
    FeedbackIcons: {
      valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'
    },fields: {

      patientSets: {
        validators: {
          notEmpty: {
            message: 'Please select a patient set'
          }
        }
      },titleOfResearchProject: {
        validators: {
          stringLength: {
            min: 5,message: 'Please Enter the title with minimum 5 letters length'
          },notEmpty: {
            message: 'Please Enter title of your project'
          }
        }
      },descriptionOfResearchProject: {
        validators: {
          stringLength: {
            min: 15,max: 100,message: 'Please enter at least 15 characters and no more than 100'
          },notEmpty: {
            message: 'Please Enter Description'
          }
        }
      },intendedUse: {
        validators: {
          notEmpty: {
            message: 'Please select one option'
          }
        }
      },}
  });

  //END FORM Validations



  $("#add_dialog").dialog({
    autoOpen: false,closeText: false,buttons: [{
        text: "Ok",icon: "ui-icon-heart",click: function() {
          console.log("OK button clicked");
          let jsonData = {}
          $.ajax({
            type: "Post",url: "url",data: JSON.stringify(jsonData),contentType: 'application/json',async: true,cache: false,success: function(data) {


              $.ajax({
                url: 'url1',type: "POST",data: 'url2',contentType: "text/uri-list",dataType: "json",success: function() {
                  location.reload();
                }
              })
            }
          });
          $(this).dialog("close");
        }


      },{
        text: "Cancel",click: function() {
          $(this).dialog("close");
        }
      }
    ]
  });
  $("#addnewdata").on("click",function(evt) {
    $("#add_dialog").dialog("open");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm">
  <div class="row">
    <div class="col-md-offset-1 col-md-4">

      <div class="form-group">
        <label class="control-label">Select your patient sets:</label>
        <select name="patientSets" class="form-control">
          <option value=" ">Please select patient set</option>
          <option>PS1</option>
          <option>PS2</option>
        </select>
      </div>



      <div class="form-group">
        <label class="control-label">Description of research project:</label>
        <textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
      </div>


    </div>
    <div class="col-md-offset-1 col-md-4">
      <div class="form-group">
        <label class="control-label">Title of your research project:</label>
        <input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text"><button id="addnewdata">Add new data</button>
      </div>

      <div class="form-group">
        <label class="control-label">Intended use:</label>
        <select name="intendedUse" class="form-control">
          <option value=" ">Please select one</option>
          <option>test1</option>
          <option>test2</option>

        </select>
      </div>

      <!--<div class="form-group">
                                
                                <button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
                              </div>-->

    </div>
  </div>
  <div class="row" id="smartSearchdisp" style="margin-top: 25px;">
    <p>A div for smart search!</p>
  </div>

  <button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>

</form>

<div id="add_dialog" title="Add New Data" style="display:none;">
  <form id="formDialog">
    <p>
      <b>Name:</b><br />
      <input id="dataname" type="text" name="nameOfProject" />
    </p>
    <p>Description:
      <textarea id="dataDescription" name="projectDescription" rows="4" cols="20"></textarea>
    </p>
  </form>
</div>

但是，当我尝试为Add New Data按钮的jQuery对话框做同样的事情时，我得到jQuery.Deferred exception: too much recursion 错误，如下面的代码片段所示。我以与上述工作代码段的表单验证相同的方式添加了引导程序验证器代码。验证对话框的情况下我该怎么办？

不起作用的代码段：

$(document).ready(function() {
  //BEGIN FORM Validations
  $('#validateForm').bootstrapValidator({
    FeedbackIcons: {
      valid: 'glyphicon glyphicon-ok',}
  });

  //END FORM Validations

  //BEGIN DIALOGE FORM validations
  $('#formDialog').bootstrapValidator({
    FeedbackIcons: {
      valid: 'glyphicon glyphicon-ok',fields: {

      nameOfProject: {
        validators: {
          notEmpty: {
            message: 'Please enter project name'
          }
        }
      },projectDescription: {
        validators: {
          notEmpty: {
            message: 'Please enter description'
          }
        }
      }


    }
  });


  //END DIALOGE FORM validations

  $("#add_dialog").dialog({
    autoOpen: false,function(evt) {
    $("#add_dialog").dialog("open");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm">
  <div class="row">
    <div class="col-md-offset-1 col-md-4">

      <div class="form-group">
        <label class="control-label">Select your patient sets:</label>
        <select name="patientSets" class="form-control">
          <option value=" ">Please select patient set</option>
          <option>PS1</option>
          <option>PS2</option>
        </select>
      </div>



      <div class="form-group">
        <label class="control-label">Description of research project:</label>
        <textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
      </div>


    </div>
    <div class="col-md-offset-1 col-md-4">
      <div class="form-group">
        <label class="control-label">Title of your research project:</label>
        <input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text"><button id="addnewdata">Add new data</button>
      </div>

      <div class="form-group">
        <label class="control-label">Intended use:</label>
        <select name="intendedUse" class="form-control">
          <option value=" ">Please select one</option>
          <option>test1</option>
          <option>test2</option>

        </select>
      </div>

      <!--<div class="form-group">
                                
                                <button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
                              </div>-->

    </div>
  </div>
  <div class="row" id="smartSearchdisp" style="margin-top: 25px;">
    <p>A div for smart search!</p>
  </div>

  <button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>

</form>

<div id="add_dialog" title="Add New Data" style="display:none;">
  <form id="formDialog">
    <p>
      <b>Name:</b><br />
      <input id="dataname" type="text" name="nameOfProject" />
    </p>
    <p>Description:
      <textarea id="dataDescription" name="projectDescription" rows="4" cols="20"></textarea>
    </p>
  </form>
</div>