Required 不适用于模态窗口中的选择

有以下情况，页面上有两个按钮并排放置Сформировать программу из краткосрочно плана，Сформировать отчет сравнение с краткосрочным планом单击它们会打开一个模态窗口：

模态窗口的 HTML 代码和用于打开模态窗口的按钮：

<input type="button" class="btn btn-success" id="btn-generate-program-from-plan" value="Сформировать программу из краткосрочно плана" />
<input type="button" class="btn btn-info" id="get-report-compare-with-plan" value="Сформировать отчет сравнение с краткосрочным планом" />

<div id="modal-choise-plan" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <input type="hidden" id="btn-click-type" />
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Выбор краткосрочного плана</h4>
      </div>
      <div class="modal-body" style="text-align: center;">
        <p>Выберите из предложенного списка краткосрочный план, на основании которого будут произведены действия.</p>
        <select id="choise-plan" required>
           <option selected value="">--Выберите план--</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success" data-dismiss="modal" id="btn-choise-plan-ok"></button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

如果单击其中一个按钮，模态窗口将如下所示：

处理页面上按钮点击的 JavaScript 代码，包括模态窗口中的按钮点击：

function fillChoisePlanSelector() {
  console.log('fillChoisePlanSelector');

  $.get('@Url.Action("GetShortTermPlanList", "Programs")', {
      year: 2016 })
    .done(function(result) {
      var parsedResult = JSON.parse(result);
      $.each(parsedResult, function(index, elem) {
        $('#choise-plan')
          .append($('<option>', {
            value: elem.Id,
            text: elem.Name
          }));
      });

      AjaxAbsoluteLoaderOff();
      $('#modal-choise-plan').modal();
    })
    .error(function() {
      AjaxAbsoluteLoaderOff();
    });
}

$('#btn-generate-program-from-plan').click(function() {
  AjaxAbsoluteLoaderOn();
  $('#btn-click-type').val('generate-program-from-plan');
  $('#btn-choise-plan-ok').text('Сформировать программу');
  fillChoisePlanSelector();
});

$('#get-report-compare-with-plan').click(function() {
  AjaxAbsoluteLoaderOn();
  $('#btn-click-type').val('report-compare-with-plan');
  $('#btn-choise-plan-ok').text('Сформировать отчет');
  fillChoisePlanSelector();
});

$('#btn-choise-plan-ok').click(function(e) {
  e.preventDefault();

  if ($('#btn-click-type').val() === 'report-compare-with-plan') {
    //TODO: Сформировать отчет
    console.log('Сформировать отчет');
  } else {
    //TODO: Сформировать программу
    console.log('Сформировать программу');
  }
});

一切似乎都很好，但是有一个问题。如果你点击下拉列表，你可以看到它required起作用了，里面的线是红色的：

但这就是问题所在：如果我什么都不选择（题词仍然存在--Выберите план--）并单击按钮Сформировать программу/отчет（题词会发生变化，具体取决于打开模态之前按下的按钮，它可以在 JS 中看到），那么它required确实如此不起作用，模态关闭，JS 继续执行。

我做错了什么，这种行为的原因是什么以及如何解决它以使其required起作用？