Question

我在Semantic UI Modal中有一个表单，我使用jQuery Form Plugin（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;
});

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（）：

long

通过删除onclick（）并给出＆＃34;他＆＃34>来修改提交按钮。一个名字：

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

如果表格无效，如何“停止”关闭模态

2 个答案: