如何“停止"如果形式无效，则关闭模态 [英] How to "stop" closing modal if form invalid

问题描述

我在语义UI模态中有一个表单，并且我使用jQuery表单插件( http://malsup.com/jquery/form/#validation )以通过ajax提交表单.表单的提交"过程由模式确定"按钮触发.但是，如果表单无效，则模态仍将关闭.

I have a form in a Semantic UI Modal, and I use the jQuery Form Plugin (http://malsup.com/jquery/form/#validation) to submit the form via ajax. The "submit" process of the form is triggered by the modal "ok" button. But if the form is invalid, the modal is still closed.

如何停止"模式关闭程序?

How can I "stop" the modal close procecedure?

非常感谢！

修改

代码段:

模式:

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

推荐答案

您只需在模式的回调中添加return false;即可防止其关闭:

You can simply add a return false; in the modal's callback to prevent it from closing:

$('.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');

这篇关于如何“停止"如果形式无效，则关闭模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！