如果表单无效，如何 "stop" 关闭模式

Question

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

如何"stop"模态关闭程序？

非常感谢！

编辑

代码片段：

模态：

    <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() 并给 "him" 一个名称来修改提交按钮：

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

如果表单无效，如何 "stop" 关闭模式

How to "stop" closing modal if form invalid

jquery

jquery-forms-plugin

semantic-ui