验证后如何保持Bootstrap PopUp表单？

Question

我实际上正在开发一个网站，您可以从表单中注册自己。

我在 PHP 中创建了一个代码，用于管理可能发生的错误（错误号码，邮件......）

这是我的问题：当我发送表单时，我无法保留它以覆盖错误遇到的表单（如果有的话）。

我在表单中使用Bootstrap，我完全不知道如何做到这一点。

这是我的 HTML

        <div class="modal fade" id="ins" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="FormIns" action="Index.php" method="post">
                        <div class="modal-header">
                            <h4 class="text-center">Inscription</h4>
                        </div>

                        <div class="modal-body">
                          <div class="row">
                              <div class="col-md-offset-3 col-md-6">
                                  <input type="text" class="form-control" name="lastname" id="lname" placeholder="Nom" maxlength="25">
                              </div>
                          </div><br/>

                          <div class="row">
                              <div class="col-md-offset-3 col-md-6">
                                  <input type="text" class="form-control" name="firstname" id="fname" placeholder="Prénom" maxlength="25">
                              </div>
                          </div><br/>

                            <div class="row">
                                <div class="col-md-offset-3 col-md-6">
                                    <input type="text" class="form-control" name="nid" id="nidentifiant" placeholder="Identifiant" maxlength="25">
                                </div>
                            </div><br/>

                            <div class="row">
                                <div class="col-md-offset-3 col-md-6">
                                    <input type="password" class="form-control" name="npass" id="npassword" placeholder="Mot de Passe" maxlength="25">
                                </div>
                            </div><br/>

                            <div class="row">
                                <div class="col-md-offset-3 col-md-6">
                                    <input type="password" class="form-control" name="cnpass" id="cnpassword" placeholder="Confirmer Mot de Passe" maxlength="25">
                                </div>
                            </div><br/>

                            <div class="row">
                                <div class="col-md-offset-3 col-md-6">
                                    <input type="mail" class="form-control" name="mail" id="mail" placeholder="Adresse Email" maxlength="25">
                                </div>
                            </div><br/>

                            <div class="row">
                                <div class="col-md-offset-3 col-md-6">
                                    <input type="text" class="form-control" name="phone" id="phone" placeholder="Numéro de Téléphone" maxlength="25">
                                </div>
                            </div><br/>

                            <div class="modal-footer">
                                <input class="btn btn-primary" type="submit" value="Inscription" name="log">
                                <a class="btn btn-default" data-dismiss="modal">Annuler</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Answer 1

首先，您应该在表单字段中添加标签。这些帮助页面以及错误消息的良好入口点。

一种简单的方法是将表单操作设置为表单页面，并将验证错误放在关联数组中，其值等 $errors['name'] = "Name did not match";等等。

然后在标签的末尾添加<span>，如（大致）这样：

<span>
  <?php echo (isset($errors['name'])) ? $errors['name'] : "";?>
</span>
</label>

这将使PHP评估错误并将它们放入标签中，以便它们可以轻松连接到该字段。

最后，要继续，请将重定向添加到下一页，如果验证成功，则创建redirect函数并将验证的数据发送到下一页。

€：为了获得好的效果，您可以使用php将alert或warning类附加到相应的form-control组或input。

Answer 2

如果您使用脚本检查值是否正确，则首先要做的是停止表单操作。

<script type="text/javascript">
$("#FormIns").submit(function(e){
    e.preventDefault();
// your code to check the form goes here

//once you finished and everything is right then:
$( "#FormIns" ).submit();
  });

</script>