Не срабатывает required у select в модальном окне

Имеется следующая ситуация, есть на странице две кнопки, которые лежат рядом друг с другом Сформировать программу из краткосрочно плана и Сформировать отчет сравнение с краткосрочным планом по нажатию на которые открывается модальное окно:

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 сработал?