Javascript 在提交表单时防止模式关闭

我有一个模型里面的表单，我想防止模型在提交表单后关闭和刷新页面，如果一些字段有错误，并且在模型里面显示错误消息，如果一切正常，模型应该提交表单并刷新页面

这是我的代码：

<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个字符，则在模式中显示错误消息，而不关闭它。在我的例子中，在刷新页面并再次单击模式的show按钮后，会显示消息

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

---

不管怎样，你想这么做吗

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

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

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

---

您需要为此重写某些客户端行为。事实上，如果可能的话，在客户端进行验证会更容易。重写表单的默认行为，验证，然后根据验证函数的结果返回true或false：

<script>
    $('form').on('submit', function(e) {
        if (validate()) { //your validation function here
            return true;
        }
        return false;
    });
    function validate() {
        if (!$('input[name=name]').val() || $('input[name=name]').val().length < 3) {
            return false;
        }
        return true;
    }
</script>

---

您需要使用AJAX调用以获取任何有用的链接或代码？以下是获取AJAX帮助的链接：。使用这些代码段更改您的代码，并更新代码以获得更多帮助。您正在避免提交，但这不会创建对服务器的请求，这只是答案的一部分。@Arthur，如果验证通过，它会的。从该事件返回true将导致表单继续提交。但他将无法调用服务器来像那样测试他的表单。嗯，这一点很好。我没有意识到他正在做服务器端验证。你也可以像$'form'那样编写它。在'submit'上，验证而不是创建增量函数。用$this.serialize替换{data:{foo:bar}}是个好主意。为了传递表单的数据，这是你的原生表单元素，$这是作为jQuery对象的表单。