时间戳

首页 > 解决方案 > 将 php 数组中的注册错误显示为模态

javascript - 将 php 数组中的注册错误显示为模态

问题描述

我正在尝试使用引导程序和 PHP 制作注册表单，并在模式中发布错误。（密码错误/电子邮件地址无效等）所有错误都放入数组中。我的问题是我不知道如何获取数组并在 HTML 中使用它，然后从那里调用模式。另外，我不希望在单击“注册按钮”后刷新页面。

我已经尝试过以下链接，但没有成功。 按钮单击未在模态窗口中触发（Bootstrap） 如果出现验证错误，如何打开模态？

这是来自文件 Register_login.php 的表格

注册登录.php

<div class="container form_container_register w-100 mt-1">
    <form method="post" action="Register_login_route.php" data-toggle="modal">
        <div class="form-group">
            <label for="inputEmailRegister">Email adress</label>
            <input type="email" class="form-control" id="inputEmailRegister" name="inputEmailRegister" aria-descridedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
            <label for="inputPasswordRegister">Password</label>
            <input type="password" class="form-control" id="inputPasswordRegister" name="inputPasswordRegister" placeholder="Enter password">
        </div>
        <div class="form-group">
            <label for="rePasswordRegister">Retype password</label>
            <input type="password" class="form-control" id="rePasswordRegister" name="rePasswordRegister" placeholder="Retype password">
        </div>

        <div class="container register_buttons_container w-100 justify-content-center align-items-center d-flex">
            <button type="submit" name="reg_button" id="reg_button_id" value="Register" data-toggle="modal" data-target="#exampleModalCenter" class="register_btn btn w-50">Register</button>  
        </div> 
    </form>
</div>

以及来自 boostrap 页面的模态：（这是放置它的正确位置）？

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Register_login_route.php $errors 是我存储错误消息的数组。我只发布了我对该数组所做的事情。如何在第一个 PHP 文件中使用 session 变量？PHP代码没有问题。$session_start() 放在两个文件中，问题在于显示模式

if (count($errors) == 0) {
    $insertPass = md5($password);

    $insertQuery = "INSERT INTO physical_users (email, password) VALUES (:email,:password)";
    $stmt = $conn->prepare($insertQuery);
    $stmt->bindParam(":email", $email);
    $stmt->bindParam(":password", $insertPass);

    $result = $stmt->execute();

} else{
    $_SESSION['errors'] = $errors;
    header("location: Register_login.php");
}

我用js尝试了上面链接中的解决方案，但没有成功

标签： javascriptphpsessionmodal-dialogbootstrap-modal

解决方案

1.) 获取页面上的错误。您可以通过将其打印为页面上的 JavaScript 变量来完成此操作。像`

<script>var errorList = <?php echo json_encode($errors);>?; </script>`

2.) 在页面上，使用 JavaScript 检查 errorList 变量。如果里面有东西，那么调用引导模式并显示它们。就像是

<script>
  $(document).ready(function(){
    if(errorList.length > 0){
      //Put the errors in the .modal-content element
      $("#exampleModalCenter .modal-content").text(errorList.join(","));
      //Show the modal
      $("#exampleModalCenter").modal("show");
    }
  })
</script>

这是一个粗略的草稿——在我写这篇文章时吐了出来——但它应该让你走上正确的道路。

推荐阅读