单击提交按钮后使用PHP验证失败时防止引导模式消失

时间:2018-03-21 14:15:23

标签: javascript php jquery html bootstrap-4

我的问题是,当用户点击注册按钮时,如何阻止模式关闭两次:

  • 如果输入无效?并显示PHP错误消息
  • 输入有效并在关闭模式之前显示几秒钟的PHP成功消息?

对于第一种情况,如果我重新打开模态,我可以看到PHP显示的验证错误消息。

I have checked this similar question但是在我的情况下还没弄清楚如何做到这一点,所以任何帮助都会非常感激。我想完全理解发生了什么以及我在做什么。

到目前为止,在这里和那里阅读后,我注意到这可能是通过以下方式实现的:

  • JQuery / JavaScript进行表单验证而不使用PHP
  • 有些人建议使用 iframe

有没有办法使用下面的PHP代码并显示此代码中的错误/成功消息?还是必须通过JQuery / JS来完成?

我的PHP代码

<?php 
ob_start();
include('header.php');
include_once("db files/db_connect.php");

if(isset($_SESSION['user_id'])) {
    header("Location: index.php");
}
$error = false;
if (isset($_POST['signup'])) {
    $name = mysqli_real_escape_string($conn, $_POST['name']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $password = mysqli_real_escape_string($conn, $_POST['password']);
    $cpassword = mysqli_real_escape_string($conn, $_POST['cpassword']); 
    if (!preg_match("/^[a-zA-Z ]+$/",$name)) {
        $error = true;
        $uname_error = "Name must contain only alphabets and space";
    }
    if(!filter_var($email,FILTER_VALIDATE_EMAIL)) {
        $error = true;
        $email_error = "Please Enter Valid Email ID";
    }
    if(strlen($password) < 6) {
        $error = true;
        $password_error = "Password must be minimum of 6 characters";
    }
    if($password != $cpassword) {
        $error = true;
        $cpassword_error = "Password and Confirm Password doesn't match";
    }

    if (!$error) {
        if(mysqli_query($conn, "INSERT INTO users(user, email, pass) VALUES('" . $name . "', '" . $email . "', '" . md5($password) . "')")) {
            $success_message = "Successfully Registered!";
        } else {
            $error_message = "Error in registering...Please try again later!";
        }
    }

}
?>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="registrationFormLabel" 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="registrationFormLabel">Register</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <div class="modal-body">


<!-- REGISTRATION FORM -->
<div class="container">
<div class="form-row">
<div class="col">
    <form onsubmit="return validateForm()" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="signupform">
        <fieldset>
            <legend>Sign Up</legend>
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" name="name" placeholder="Enter Full Name" required value="<?php if($error) echo $name; ?>" class="form-control" />
                <span class="text-danger"><?php if (isset($uname_error)) echo $uname_error; ?></span>
            </div>                  
            <div class="form-group">
                <label for="name">Email</label>
                <input type="text" name="email" placeholder="Email" required value="<?php if($error) echo $email; ?>" class="form-control" />
                <span class="text-danger"><?php if (isset($email_error)) echo $email_error; ?></span>
            </div>
            <div class="form-group">
                <label for="name">Password</label>
                <input type="password" name="password" placeholder="Password" required class="form-control" />
                <span class="text-danger"><?php if (isset($password_error)) echo $password_error; ?></span>
            </div>
            <div class="form-group">
                <label for="name">Confirm Password</label>
                <input type="password" name="cpassword" placeholder="Confirm Password" required class="form-control" />
                <span class="text-danger"><?php if (isset($cpassword_error)) echo $cpassword_error; ?></span>
            </div>
            <div class="form-group text-center">
                <input id="modalSubmit" type="submit" name="signup" value="Sign Up" class="btn btn-primary" formnovalidate />
            </div>
        </fieldset>
    </form>
    <span class="text-success"><?php if (isset($success_message)) { echo $success_message; } ?></span>
    <span class="text-danger"><?php if (isset($error_message)) { echo $error_message; } ?></span>
</div><!-- / col -->
</div><!-- / form-row -->

<!-- already registered row -->
<div class="row">
<div class="col text-center">   
    Already Registered? <a href="login.php">Login Here</a>
</div>
</div>  <!-- / already registered row -->
</div><!-- / REGISTRATION FORM container-->

        </div><!-- / Modal body div -->
      </div>
  </div>
</div><!-- / Modal -->

当用户单击索引页面上的按钮时,我的模态会打开,这里是JQuery代码

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
}); 

2 个答案:

答案 0 :(得分:0)

脚本标记

之前,在文档结尾( / html )之后添加以下PHP脚本
<?php 
if ($error) {
    echo '<script>$("#myModal").modal("show");</script>';
} else {
    echo '<script>$("#myModal").modal("hide");</script>';
}
?>

答案 1 :(得分:0)

无效: 如果输入无效,您可以停止提交提交按钮。

要停止提交,请使用代码

$(':input[type="submit"]').prop('disabled', true);

显示模态

$("#myModal").modal('show');

要再次启用提交,当模态由于错误而关闭时,请使用代码 (您需要再次启用它,以便用户可以再试一次)

$("#myModal").on('hidden.bs.modal', function (e) {
        $(':input[type="submit"]').prop('disabled', false);
    });

对于验证,我会这样做(添加成功变量):

if (!$error) {
    if(mysqli_query($conn, "INSERT INTO users(user, email, pass) VALUES('" . $name . "', '" . $email . "', '" . md5($password) . "')")) {
        $success = 1;
    } else {
        $success = 2;
    }

然后像这样称呼它:

<?php if($success == 1){ ?>
<script>
    $(document).ready(function() {
        $("#yoursuccessmodal").modal('show');
    });
</script> <?php } ?>

然后,您可以选择向其添加淡入淡出,或让用户单击它。 然后,模式将显示在已发送子目录之后。

这是一项更好的工作,因为我在我的项目中也以这种方式使用它,它对我来说就像是一种魅力。