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

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

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

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

изменить

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

модальный:

    <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;
});

jquery semantic-ui jquery-forms-plugin
person Community    schedule 17.06.2015    source источник
comment
У вас есть фрагмент кода?   -  person depperm    schedule 17.06.2015
comment
Создайте диалог с кнопкой и событием onclick вместо встроенного: modal: true, buttons: { "Submit": function() {   -  person mplungjan    schedule 17.06.2015
comment
Хорошо, это сделано. Но как должна возвращаться функция отправки? Модальное окно по-прежнему закрывается... return false не работает.   -  person    schedule 17.06.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете просто добавить 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');
person Moustach    schedule 17.06.2015

arrow_upward
0
arrow_downward

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

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

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

 <div class="ui button primary" id="theSubmitButton">Speichern</div>
person Shadi Namrouti    schedule 31.10.2017