How to avoid asking the user to refill all form fields when one field has an error

New to php, would appreciate your help with this:

I made a signup form script to validate the user’s input via multiple error handlers. (check valid email, pwd and pwd re-entry match etc).

In case the user filled all fields but one had an error (failed to pass the error handler), i wanted to send back the other fields to the same form so the user doesn’t have to refill’m all over again. So if the passwords dint match, i wanted to reload the same page but with the other filed filled.

i can see the information in the url of the page but not in the form fields. below my form HTML

<div class="register-content">
                <form action="includes/signup.inc.php" method="POST" class="margin-bottom-0">
                    <label class="control-label">Name <span class="text-danger">*</span></label>
                    <div class="row row-space-10">
                        <div class="col-md-6 m-b-15">
                            <input type="text" name="uFirst" class="form-control" placeholder="First name" required />
                        </div>
                        <div class="col-md-6 m-b-15">
                            <input type="text" name="uLast" class="form-control" placeholder="Last name" required />
                        </div>
                    </div>

                    <label class="control-label">Username <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="text" name="uName" class="form-control" placeholder="Username" required />
                        </div>
                    </div>

                    <label class="control-label">Email <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="text" name="mail" class="form-control" placeholder="Email address" required />
                        </div>
                    </div>


                    <label class="control-label">Password <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="password" name="pwd" class="form-control" placeholder="Password" required />
                        </div>
                    </div>

                    <label class="control-label">Re-enter Password <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="password" name="pwd-repeat" class="form-control" placeholder="Re-enter Password" required />
                        </div>
                    </div>

Below my php code

<?php if(isset($_POST['signup-submit'])) {

  require 'dbh.inc.php';

  $firstName=$_POST['uFirst'];
  $lastName=$_POST['uLast'];
  $userName=$_POST['uName'];
  $email=$_POST['mail'];
  $password=$_POST['pwd'];
  $passwordRepeat=$_POST['pwd-repeat'];

  if (!filter_var($email, FILTER_VALIDATE_EMAIL) && !preg_match("/^[a-zA-Z0-9]*$/", $username)) {
    header("location: ../signup.php?error=invalidemail&uid&uFirst=".$firstName."&uLast=".$lastName);
    exit();

  } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    header("location: ../signup.php?error=invalidemail&uFirst=".$firstName."&uLast=".$lastName."&uName=".$userName);
    exit();

  } else if (!preg_match("/^[a-zA-Z0-9]*$/", $username)) {
    header("location: ../signup.php?error=invaliduid&uFirst=".$firstName."&uLast=".$lastName."&mail=".$email);
    exit();

  } else if ($password !== $passwordRepeat) {
    header("location: ../signup.php?error=passwordnotmatching&uFirst=".$firstName."&uLast=".$lastName."&uName=".$userName."&mail=".$email);
    exit();

?>

Answer

There are several ways to address this. Ultimately, there are two high-level options:

1. Pass the valid values back into the new form
2. Never remove the valid values(i.e. JavaScript + AJAX)

With your current setup, (1) would be simpler. To work with your current design, you would need to store the values somewhere to pass back to the form to render. The simplest would be to add them to the URL parameters(query string), but other options include cookies or session storage.

The simplest option would be to combine your form and validation into a single endpoint rather than separating them. That way, you already have the post data when rendering the form with the error messages.

Once you have the values, you can simply insert them into the form HTML with the value attribute(be sure to HTML encode(htmlentities) any user input values to avoid XSS vulnerabilities).

For example:

 <input type="text" name="uFirst" class="form-control" placeholder="First name" value="<?= htmlentities($firstName) ?>" required />

I just noticed(from one of the comments) that you are already passing your valid values in the query string with your existing redirect. In that case, you can simply do something like this:

 <input type="text" name="uFirst" class="form-control" placeholder="First name" value="<?= htmlentities($_GET["uFirst"]??"") ?>" required />

Encoding the values is very important. Not properly encoding values, especially from user input, can allow malicious users to craft values that break out of your HTML and alter the page, a vulnerability known as Cross-Site Scripting(or XSS, for short).