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

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

Выбор краткосрочного плана

Выберите из предложенного списка краткосрочный план, на основании которого будут произведены действия.

--Выберите план--

Если нажать на одну из кнопок, то модальное окно выглядит примерно так:

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($('', { 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 сработал?

Ответ

Методом проб и ошибок выяснил, что если у кнопки убрать data-dismiss="modal" и в JavaScript убрать обработку нажатия на кнопку $('#btn-choise-plan-ok').click то валидация начинает работать. При любой попытке навесить обработку нажатия на кнопку - валидация перестает работать. Поэтому было решено перенести форму внутрь модального окна (она была вокруг модалки):

Выбор краткосрочного плана

Выберите из предложенного списка краткосрочный план./p> --Выберите план--

И навесить обработку отправки данных с формы:
$('#form-choise-plan').submit(function(e) { e.preventDefault(); $('#modal-choise-plan').modal('hide');
if ($('#btn-click-type').val() === 'report-compare-with-plan') { //TODO: Сформировать отчет console.log('Сформировать отчет'); } else { //TODO: Сформировать программу console.log('Сформировать программу'); } });
Оставшийся код остался без изменений. Таким образом валидация обязательного поля работает: