How to handle PHP form validation errors using bootstrap alerts? - php

Question

I'm developing a webapp using PHP and I have a form in which users can create an account. So I have some server-side validations like if the password is 8 characters or more. All I need is that I want to show the error message returning from PHP via bootstrap alert.
For example a user have entered an invalid password, like it's 6 characters instead of 8. I want it to return the error like this:
I want this alert box to show up
Here I've got two pages. register-action.php and footer.php
In the register-action.php I've got my PHP to validate the form in which the user enters data.
In the footer.php I've got my form which is in a bootstrap modal actually (as you can see in the photo above).
Here is the if condition in register-action.php which validates the password:
$uppercase = preg_match('#[A-Z]#', $password1);
$lowercase = preg_match('#[a-z]#', $password1);
$number = preg_match('#[0-9]#', $password1);
if(!$uppercase || !$lowercase || !$number || strlen($password1) < 8) {
$passwordNotGood = "Your password is not satisfying the requirements";
echo $passwordNotGood;
exit();
}
Here is the bootstrap alert in footer.php:
<!-- This alert will show up if password requirements are not satisfied -->
<div class="alert alert-danger" role="alert">
<p>Your password should be more than 8 character and should container ....</p>
</div>
I want the bootstrap alert to be hidden unless the error is needed to be showed up. So if the user has entered a short password I want the form not to submit and the alert show up.
So how can I return the error from PHP via bootstrap alert when the user submits the form?
I've tried to actually change the HTMLDOM from PHP using JS but it didn't turned out the way I wanted.

Answer 1

You can print php error with this code. for example:
<div class="alert alert-danger">
<?php echo $errorVariable ?>
</div>
My advice for you: use errors array and when the inputs have many errors you can do for loop to this errors and show them in one time like:
<?php
$errorsArr = [];
?>
<?php if(count($errors)){ ?>
<div class="alert alert-danger">
<ul>
<?php foreach($errors as $error){ ?>
<li><?php echo $error ?></li>
<?php?>
<ul>
</div>
<?php } ?>
I wish i have answerd your question.
regards.

Answer 2

The short answer is that you need to solve this in the front end by javascript.
Your logic in the php is good but your approach is not going to work. You can do this validation in php using SESSION variables but in your case that your form is in a pop up I think it is not the way to go. You have two options:
-doing a front end validation by javascript.
-making an AJAX request
I assume that you are not yet very experienced in web environnment so I recommend you the first option.
Good luck!