[英]Preventing bootstrap modal from disappearing in case validation failure using PHP after submit button is clicked
My question is how do I stop modal from closing, on two occasions, when user clicks the sign up button: 我的问题是,当用户单击“注册”按钮时,如何两次停止模态关闭:
for the first case if I reopen the modal I can see the validation error messages which are displayed by PHP. 对于第一种情况,如果我重新打开模式,可以看到PHP显示的验证错误消息。
I have checked this similar question but haven't figure it out how to do it in my case yet so any help will be much appreciated. 我已经检查了这个类似的问题,但还没有弄清楚该如何解决,因此非常感谢您的帮助。 I would like to fully understand what is going on and what I am doing.
我想完全了解正在发生的事情和我在做什么。
So far after reading here and there I noticed that this can probably be achieved by: 到目前为止,在这里和那里阅读之后,我注意到可以通过以下方式实现此目的:
Is there a way to use the PHP code below and display error / success messages from this code? 有没有办法使用下面的PHP代码并显示该代码中的错误/成功消息? or it has to be done via JQuery/JS?
还是必须通过JQuery / JS完成?
My PHP with HTML code 我的HTML代码的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">×</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 -->
My modal opens when the user clicks the button on index page and here is the JQuery code 当用户单击索引页面上的按钮时,我的模式打开,这是JQuery代码
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
Add below PHP script after end of document ( /html ) before script tag 在文档末尾( / html ) 脚本标记之前添加以下PHP脚本
<?php
if ($error) {
echo '<script>$("#myModal").modal("show");</script>';
} else {
echo '<script>$("#myModal").modal("hide");</script>';
}
?>
Invalid: You can stop the submit button from submitting if the inputs are invalid. 无效:如果输入无效,则可以停止提交按钮。
To stop submit use the code 要停止提交,请使用代码
$(':input[type="submit"]').prop('disabled', true);
To show modal 显示模态
$("#myModal").modal('show');
To enable submit again, when modal is closed due to error, use the code (You will want to enable it again so the user can try again) 要再次启用提交,当模态由于错误而关闭时,请使用代码(您将要再次启用它,以便用户可以重试)
$("#myModal").on('hidden.bs.modal', function (e) {
$(':input[type="submit"]').prop('disabled', false);
});
For the validation I would do it this way (add a success variable): 为了进行验证,我将以这种方式进行操作(添加成功变量):
if (!$error) {
if(mysqli_query($conn, "INSERT INTO users(user, email, pass) VALUES('" . $name . "', '" . $email . "', '" . md5($password) . "')")) {
$success = 1;
} else {
$success = 2;
}
And then call it like this: 然后这样称呼它:
<?php if($success == 1){ ?>
<script>
$(document).ready(function() {
$("#yoursuccessmodal").modal('show');
});
</script> <?php } ?>
You can then choose to add a fade to it, or have the user click it away. 然后,您可以选择为其添加淡入淡出,或者让用户单击它。 The modal will then show AFTER the submition has been sent.
然后,该模式将在提交提交后显示。
This better work, as I have used it this way in my project as well and it works like a charm for me. 这是一项更好的工作,因为我在项目中也以这种方式使用了它,并且对我来说就像是一种魅力。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.