尝试在引导弹出窗口中添加其他表单复选框

Question

我有一个接受输入字段，然后有一个提交按钮。单击提交按钮时，我希望出现一个弹出框，其中包含您需要同意的复选框，然后才能提交表单。选中复选框后，可以再次单击显示弹出框的按钮以提交表单。

我遇到的问题是，一旦选中了复选框，然后再次单击了提交按钮，弹出窗口中的复选框数据就会消失，并且由于我在复选框上有必需的标记，因此表单也没有提交。

这是我到目前为止的代码。

HTML：

<form id="signup" class="needs-validation resize-form form-inline" 
action="/api/users/signup" method="POST"
novalidate>
    <div class="form-group auto">
      <div class="custom-control col is-invalid">
        <div id="result">
          <label for="phone"></label>
          <input class="form-control form-control-lg" type=tel id="phone" 
          name="phone"
            placeholder="Enter Phone Number" autocomplete="off" required>
        </div>
        <input id="phonenumber" name="phonenumber" type="hidden">
        <input id="ref" name="ref" type="hidden" value="<%= ref %>">
      </div>
      <div class="col">
        <button type="submit" id="popover" class="tagline-btn btn btn-        
         outline-primary btn-lg">
        Sign Up
        </button>
        <div id="popover-content" class="hide">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="statement1" 
            required>
            <label class="form-check-label" for="statement1">Statement         
            1</label>
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="statement2" 
            required>
            <label class="form-check-label" for="statement2">Statement 
            2</label>
          </div>
        </div>
      </div>
    </div>
</form>

JavaScript + jQuery代码：

$('#popover').popover({
    html: true,
    content: function () {
      return $("#popover-content").html();
    }
  });

  var reset = function () {
    errorMsg.classList.remove("d-block");
  };

  (function () {
    'use strict';
    window.addEventListener('load', function () {
      var forms = document.getElementsByClassName('needs-validation');
      var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();

  input.addEventListener('keydown', reset);

谢谢您的帮助！