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

#javascript #html #jquery #bootstrap #валидация

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

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

Ответы

Ответ 1

Методом проб и ошибок выяснил, что если у кнопки убрать 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('Сформировать программу');
    }
});


Оставшийся код остался без изменений. Таким образом валидация обязательного поля
работает: