Как «остановить» закрытие модального, если форма недействительна

Question

У меня есть форма в семантическом пользовательском интерфейсе, и я использую плагин формы jQuery (http://malsup.com/jquery/form/#validation), чтобы отправить форму через ajax. Процесс «Отправить» формы запускается модальной кнопкой «ok». Но если форма недействительна, модальность все еще закрыта.

Как я могу «остановить» модальную процедуру закрытия?

Большое спасибо!

редактировать

Фрагменты кода:

модальный:

<div class="ui modal" id="add-item-modal"> 
    <i class="close icon"></i> 
    <div class="header"> 
     Eintrag hinzufügen 
    </div> 
    <div class="content"> 
     {{ include('adachauerJobsBundle:CV/forms:training.html.twig') }} 
    </div> 
    <div class="actions"> 
     <div class="ui buttons"> 
      <div class="ui button" onclick="$('#modal-form').reset();">Abbrechen</div> 
      <div class="ui button primary" onclick="$('#modal-form').submit();">Speichern</div> 
     </div> 
    </div> 
</div> 

Модальные шоу:

$('.show-modal').click(function(e) { 
     e.preventDefault(); 
     $($(this).attr('data-modal-id')).modal('show'); 
    }); 

Форма представить:

var cvDataTarget = '#cv-data-target'; 
$('.ajax-form').submit(function() { 
    $(this).ajaxSubmit({ 
     beforeSubmit: function(formData, jqForm, options) { 
      for (var i=0; i < formData.length; i++) { 
       if (!formData[i].value) { 
        console.log(0); 
        alert('Bitte fülle alle erforderlichen Felder aus, um den Eintrag zu speichern.'); 
        $('#'+formData[i].name).focus(); 
        return false; 
       } 
      } 
     }, 
     success: function(t) { 
      console.log(t); 
      if (t.success == true) { 
       $(cvDataTarget).html($(cvDataTarget).html()+ t.html); 
      } else { 
       alert(t.error); 
      } 
     } 
    }); 

    return false; 
}); 

Answer 1

Вы можете просто добавить return false; в обратный вызов модального, чтобы не допустить его закрытия:

$('.show-modal').click(function(e) { 
    e.preventDefault(); 
    $($(this).attr('data-modal-id')).modal('show',{ 
     onApprove : function() { 
      return false; //block the modal here 
     } 
    }); 
}); 

И как только вы закончите, вы можете позвонить

$(theModal).modal('hide'); 

Answer 2

вызов preventDefault() непосредственно перед представив форму:

$('#theSubmitButton').click(function (e) { 
     e.preventDefault(); 
     $('#modal-form').submit(); 
}); 

Изменить кнопку отправки, удалив onclick() и давая " его "имя:

<div class="ui button primary" id="theSubmitButton">Speichern</div>