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 本身检查数据有效性（例如，如果电子邮件实际上是电子邮件）？

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

如果您正在服务器端进行验证，那么您可以返回代码，而不是返回消息，例如：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");
    }
});

如果您可以发布 send.php ，我可能会为您提供完整的解决方案代码。

Answer 2

you can do this using hide.bs.modal event. this event fired automatically when modal going to hide

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

and one more simple thing is don't provide any close buttons on modal and use below code. In below code user will not be able to close the modal. user will have only one option to enter data.

JS

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

or HTML

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

backdrop: static prevents modal close that occurs through click on screen outside modal. keyboard:false prevents modal close through keyboard. (generally modal can be closed using ESC key)

提交表单错误时阻止模式关闭（jQuery）

HTML：

JS

2 个答案: