在错误处理期间重新显示不需要的字段

Question

I've made it so I have 1 form which includes a hidden div with extra input fields that are displayed when the "Add More" button is clicked. When the form is submitted with invalid data, the Quote Form is re-displayed holding the valid data, as well as, error messages for the invalid data.

The problem is, the original 3 fields that are shown when you first get to the page are re-displayed above the Quote Form when error handling.

Is there a way to hide those 3 fields when the Quote Form is re-displayed with errors?

// Error checking. If there are errors, call the redisplayForm function to redisplay the Quote Form Handler.
if ($errorCount>0 || $errorCount<0) {
    redisplayForm($bizName, $bizType, $address1, $address2, $city, 
    $state, $zip, $sqft, $cName, $email, $bizNameErr, $bizTypeErr,
    $address1Err, $cityErr, $stateErr, $zipErr, $sqftErr, $cNameErr, $emailErr );

    $bizNameErr = $bizTypeErr = $address1Err = $address2Err = $cityErr = $stateErr
    = $zipErr = $sqftErr = $cNameErr = $emailErr = "";

    $bizName = $bizType = $address1 = $address2 = $city = $state
    = $zip = $sqft = $cName = $email = "";
// If there are no errors, an email will be sent to Conversion Worx with the user's input.
} else {
    $To = "myemail"; 
    $Subject = "Quote Form Results";
    $Message = "Business Name: " . $bizName . "
" 
    . "Business Type: " . $bizType . "
"
    . "Address Line 1: " . $address1 . "
"
    . "Address Line 2: " . $address2 . "
"
    . "City: " . $city . "
"
    . "State: " . $state . "
"
    . "Zip Code: " . $zip . "
"
    . "Estimated Square Feet: " . $sqft . "
"
    . "Contact Name: " . $cName . "
"
    . "Email Address: " . $email;
    $result = mail($To, $Subject, $Message);
}
// If email to Conversion Worx is sent succesfully, send thank you email to user.
if (isset($result)) {
    $To = $email;
    $Subject = "Virtual Tour Quote Request";
    $Headers = 'From: myemail' . "
" . 
        'Reply-To: myemail' . "
" .
        'X-Mailer: PHP/' . phpversion();
    $Message = $cName . ",";
    $Message .= "
" . "
" . "Thank you for your interest in our 3D 360° Virtual Tours!";
    $Message .= "
" . "
" . "Your information has been submitted. ";
    $Message .= "A Conversion Worx represenative will be contacting you shortly to arrange a quote via phone or on-site visit.";
    $Message .= "
" . "
" . "We look forward to working with you! ";
    $Message .= "
" . "
" . "
" . "Sincerely,";
    $Message .= "
" . "
" . "The Conversion Worx Team";
    $result = mail($To, $Subject, $Message, $Headers);
}
 ?>

<?php

$errorCount = "";

$bizNameErr = $bizTypeErr = $address1Err = $address2Err = $cityErr = $stateErr
= $zipErr = $sqftErr = $cNameErr = $emailErr = "";

$bizName = $bizType = $address1 = $address2 = $city = $state
= $zip = $sqft = $cName = $email = "";
// Check to make sure the required fields from the Quote Form are not empty
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["bizName"])) {
    $bizNameErr = "Business name is required";
    ++$errorCount;
  } else {
    $bizName = test_input($_POST["bizName"]);
  } 
  if (empty($_POST["cName"])) {
    $cNameErr = "Contact Name is required";
    ++$errorCount;
  } else {
    $cName = test_input($_POST["cName"]);
  }
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
    ++$errorCount;
  } else {
    $email = test_input($_POST["email"]);
  }
  if (empty($_POST["bizType"])) {
    $bizTypeErr = "Business Type is required";
    ++$errorCount;
  } else {
    $bizType = test_input($_POST["bizType"]);
  }
  if (empty($_POST["address1"])) {
    $address1Err = "Address Line 1 is required";
    ++$errorCount;
  } else {
    $address1 = test_input($_POST["address1"]);
  }
   if (!empty($_POST["address2"])) {
    $address2 = test_input($_POST["address2"]);
  }
  if (empty($_POST["city"])) {
    $cityErr = "City is required";
    ++$errorCount;
  } else {
    $city = test_input($_POST["city"]);
  }
  if (empty($_POST["state"])) {
    $stateErr = "State is required";
    ++$errorCount;
  } else {
    $state = test_input($_POST["state"]);
  }
  if (empty($_POST["zip"])) {
    $zipErr = "Zip Code is required";
    ++$errorCount;
  } else {
    $zip = test_input($_POST["zip"]);
  }
  if (empty($_POST["sqft"])) {
    $sqftErr = "Square Feet is required";
    ++$errorCount;
  } else {
    $sqft = test_input($_POST["sqft"]);
  }   
}
// Form validation
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

Answer 1

You have two choices: validation within the browser (via javascript/jQuery) or at the server (PHP).

If you choose the PHP route, the page will change or refresh, any data typed into the fields will be lost, unless you take specific steps to store/retrieve/replace it.

javascript/jQuery route:

If you choose the javascript route, you can interrupt the form submit process and handle most (if not all) of your form field validation. If any of the fields fail validation, you can not only return control to the user with all data still in situ, you can also direct their attention to the errors (for example, by adding a class to the missed field(s) that draws attention, or by popping-up a modal dialog message, or by focusing the cursor on the missed field, etc.)

PHP route:

If you choose the PHP route, how do you preserve/restore the user data? With a lot of manual labor... You can:

1) Store the field values into localStorage using a bit of javascript. It requires quite a bit of coding on your part, but it works. Again, you would interrupt the form submission process and store the data in the instant before the form is submitted.

2) In PHP, receive all field values. If any field fails validation, you can send the user (via the PHP headers directive?) back to the same page, or to another page, along with all the user data. This means either creating a new page, or adding PHP code to your existing page, to look for these values being posted in, and if they are found, constructing the page in such a way that you display the form with those values already filled in. This method requires even more work than the first method.

Frankly, the easiest way to accomplish what you want is with client-side, javascript-based field validation - that is how 99% of websites handle this situation. The advantages far outweigh any negatives. If you are concerned with super-users using F12 DevTools to trick your field validation, then you have a backup check in PHP that does not bother to preserve the form data (serves 'em right...!). The number of people who fall into the hacker category are so few and far between that you really needn't cater to them - but you do need to double-check on the PHP side, just don't worry about preserving their data. Take care of that on the javascript side

See these resources:

How to direct a user directly to a form