Попытка иметь дополнительные флажки формы в загрузочном поповере

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);

Заранее спасибо за помощь!