javascript - 提交表单时防止模式关闭

Question

我在模态中有一个表单，如果某些字段有错误，我想防止模态在提交表单后关闭并刷新页面，并在模态中显示错误消息，如果一切正常，模态应提交形成并刷新页面。

这是我的代码:

<div class="modal fade" id="addTeam">
<div class="modal-dialog rap-modal-thumb">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        <h4 class="modal-title" id="myModalLabel">Add team</h4>
        </div>
        <div class="modal-body"><br>
              <div class="page-wrap">
                <form action= "<?php echo $action; ?>" enctype="multipart/form-data" method="post">
                  <div class="container">
                        <div class="row">                                                   
                          <div class="input-group input-group-icon">
                              <div class="col-third input-group-icon">
                                <input type="text" id="name" name="name" placeholder="Nom*" required="required">
                                <div class="input-icon"><i class="fa fa-users"></i></div>
                              </div>
                              <div class="col-third input-group-icon">
                                <input type="text" id="abreviation" name="abreviation" placeholder="Abréviation*" required="required">
                                <div class="input-icon"><i class="fa fa-flag-o"></i></div>
                                </div>
                        <br>
                        * Required fields
                        <br><br>
                        <?php
                            if (isset($error)) 
                                echo '<div style="color:#fff;" class="alert bg-danger" role="alert"><em class="fa fa-lg fa-warning">&nbsp;&nbsp;</em>',$erreur,'</div>';  
                        ?>
                        <button type="submit" id="addTeam" name="addTeam" class="btn btn-primary">Ajouter</button>
                    </div>
                </form>
            </div>
            <br>
        </div>
    </div>
</div>

在 php 中，例如，如果团队名称少于 6 个字符，则在模式中显示错误消息而不关闭它。在我的例子中，刷新页面并再次单击模式的显示按钮后会出现消息。

if (isset($_POST['addTeam'])) {
    $name= $_POST['name'];
    if (strlen($name)<3){
        $error = 'Name must be atleast 6 characters';
    }
    else{
        $action = "uploadTeam.php";
    }
}

无论如何都要这样做吗？

Answer 1

如果您的表单默认由浏览器提交，它将自动刷新页面(以向服务器创建新的 HTTP POST 请求)

您必须使用AJAX在后台调用服务器并避免重新加载内容:

// Create an event listener to catch "when the form is submited"
$('.modal-body form').submit(function(event) {
    // to stop the form from submitting (and the page reloading, so the modal will not close)
    event.preventDefault(); 

    // Call server manually and send form data (see Mikey's comment)
    $.post('my.url.com/file.php', $(this).serialize(), function(err, result) {
      if (err) { 
        // Display error on form 
      } else {
        // Success... Redirect ?
        window.location = 'my.new.url/path.html'
      }
    })
});