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

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  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.

CodePudding user response：

You can print php error with this code. for example:

<div >
  <?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 >
  <ul>
    <?php foreach($errors as $error){ ?>
      <li><?php echo $error ?></li>
    <?php?>
  <ul>
</div>
<?php } ?>

I wish i have answerd your question. regards.

CodePudding user response：

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!