防止错误提交表单时关闭模态 (jQuery)

Question

所以基本上我有一个 bootstrap 形式的模态：

html:

<div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- some heading here -->
            </div>
            <div class="modal-body">
                <form class="form-partner">
                    <!-- some form here -->
                </form>
            </div>
            <div class="modal-footer" style="text-align:center;">
                <div id="message"></div>
                <button class="btn btn-lg" type="submit" id="submit">BUTTON</button>
            </div>
        </div>
    </div>
</div>

还有一个 jQuery 脚本将其发送到 send.php，在那里数据被检查并提交给服务器。

js

$(function() {
    $("#submit").click(function(){
        $.ajax({
            type: "POST",
            url: "send.php",
            data: $('form').serialize(),
            success: function(msg){
                $("#message").html(msg)
                //$("#modal").modal('hide'); 
            },
            error: function(){
                alert("failure");
            }
        });
    });
});

我向 div#message 写了一条错误消息，但我需要它在提交成功时关闭模式。

有没有办法做到这一点，比如我可以在 jQuery $.ajax[=28 中检查数据有效性（比如电子邮件是否真的是电子邮件） =] 本身？

Answer 1

您可以在 $.ajax 调用之前进行验证检查，并将错误消息写入模态（如果有）。只有验证成功才执行ajax。

$(function() {
$("#submit").click(function(e){
    e.preventDefault();
    var email= ....; //get user entered email;
    //validate email (pseudo code)
    if(email is invalid) {
    //display message to div#message
    }
    else {
    //make ajax call
    $.ajax({
        type: "POST",
        url: "send.php",
        data: $('form').serialize(),
        success: function(msg){
            $("#message").html(msg)
            //$("#modal").modal('hide'); 
        },
        error: function(){
            alert("failure");
        }
    });
    }
});
});

如果您在服务器端进行验证，那么您可以 return 代码代替 returning 消息，例如：1 表示成功，2 表示错误电子邮件等。然后你可以在 ajax 函数中做这样的事情：-

$.ajax({
    type: "POST",
    url: "send.php",
    data: $('form').serialize(),
    success: function(msg){
        if(msg == 1) $("#modal").modal('hide');
        else if(msg == 2) $("#message").html("Bad Email");
        //etc...
    },
    error: function(){
        alert("Failed to submit data");
    }
});

如果你可以post你的send.php我也许可以给你一个完整的解决方案代码。

Answer 2

您可以使用 hide.bs.modal 事件来完成此操作。当模式要隐藏时自动触发此事件

JS

$('.modal').on('hide.bs.modal', function(e) {        
   // Submit data to server and in success callback write if to validate whether form data is valid or not . 
    if(invalidForm) {           
            e.preventDefault();
    }
});

还有一件更简单的事情是不要在模态上提供任何关闭按钮并使用下面的代码。在下面的代码中，用户将无法关闭模式。用户将只有一个选项来输入数据。

JS

 $('#myModal').modal({backdrop: 'static', keyboard: false})

或HTML

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>

backdrop: static 防止通过点击模态外的屏幕发生模态关闭。 keyboard:false 防止通过键盘关闭模态。（一般模态可以使用ESC键关闭）

防止错误提交表单时关闭模态 (jQuery)

Prevent modal from closing when error submitting the form (jQuery)

forms

ajax

jquery

twitter-bootstrap

bootstrap-modal

html:

js