CODEWITHSUNDEEP
phphtml
codecodecode
codecodecode

Reputation: 19

PHP form with multiple steps and validation

I'm new to PHP and I'm trying to create an easy form that has multiple steps. For each step, a validation of the input is happening before the user is directed to the next page. If the validation fails, the user should stay on the same page and an error message should be displayed. In the end, all entries that the user has made should be displayed in an overview page.

What I have been doing to solve this, is to use a boolean for each page and only once this is true, the user can go to the next page. This is not working as expected unfortunately and I guess it has something to do with sessions in PHP... I also guess that there's a nicer way to do this. I would appreciate some help!

Here's my code:

<!DOCTYPE HTML>  
<html>
<head>
<title>PHP Test</title>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>  

<?php
session_start();


$_SESSION['$entryOne'] = "";
$_SESSION['$entryOneErr'] = $_SESSION['$emptyFieldErr'] = "";
$_SESSION['entryOneIsValid'] = false;

$_SESSION['$entryTwo'] = "";
$_SESSION['$entryTwoErr'] = "";
$_SESSION['entryTwoIsValid'] = false;


// Validation for first page
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submitEntryOne'])) {

      if (!empty($_POST["entryOne"])) {

         // Check for special characters
        $_SESSION['$entryOne'] = removeWhitespaces($_POST["entryOne"]);
        $_SESSION['$entryOneErr'] = testForIllegalCharError($_SESSION['$entryOne'], $_SESSION['$entryOneErr']);

        // If error text is empty set first page to valid
        if(empty($_SESSION['$entryOneErr'])){
            $_SESSION['$entryOneIsValid'] = true;
        }

      } else {
            // Show error if field hasn't been filled
            $_SESSION['$emptyFieldErr'] = "Please enter something!";
        }       

// Validation for second page
  } else if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submitEntryTwo'])) {

    if (!empty($_POST["entryTwo"])) {

            // Check for special characters
            $_SESSION['$entryTwo'] = removeWhitespaces($_POST["entryTwo"]);
            $_SESSION['$entryTwoErr'] = testForIllegalCharError($_SESSION['$entryTwo'], $_SESSION['$entryTwoErr']);

            // If error text is empty set second page to valid
            if(empty($_SESSION['$entryTwoErr'])){
                $_SESSION['$entryTwoIsValid'] = true;
            }

        } else {
              // Show error if field hasn't been filled
              $_SESSION['$emptyFieldErr'] = "Please enter something!";
          } 
  }

//Remove whitespaces at beginning and end of an entry
function removeWhitespaces($data) {
    $data = trim($data);
    return $data;
}

//Check that no special characters were entered. If so, set error 
function testForIllegalCharError($wish, $error){
    $illegalChar = '/[\'\/~`\!@#\$%\^&\*\(\)_\-\+=\{\}\[\]\|;:"\<\>,\.\?\\\]/';
    if (preg_match($illegalChar,$wish)) {
        $error = "Special characters are not allowed"; 
    } else {
        $error = "";
    }
    return $error;
}
?>



<?php if (isset($_POST['submitEntryOne']) && $_SESSION['$entryOneIsValid'] && !$_SESSION['$entryTwoIsValid']): ?>

  <h2>Second page</h2>
  <p>Entry from first Page: <?php echo $_SESSION['$entryOne'];?></p>

  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
    Entry Two: <input type="text" name="entryTwo" value="<?php echo $_SESSION['$entryTwo'];?>">
    <span class="error"><?php echo $_SESSION['$entryTwoErr'];?></span>
    <br><br>
    <input type="submit" name="submitEntryTwo" value="Next">  
  </form>



<?php elseif (isset($_POST['submitEntryTwo']) && $_SESSION['$entryTwoIsValid']): ?>

  <h2>Overview</h2>
  <p>First entry: <?php echo $_SESSION['$entryOne'];?></p>
  <p>Second Entry: <?php echo $_SESSION['$entryTwo'];?></p>


<?php else: ?>

  <h2>First page</h2>
  <span class="error"><?php echo $_SESSION['$emptyFieldErr'];?></span>
  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
    <br><br>
    First entry: <input type="text" name="entryOne" value="<?php echo $_SESSION['$entryOne'];?>">
    <span class="error"> <?php echo $_SESSION['$entryOneErr'];?></span>
    <br><br>
    <input type="submit" name="submitEntryOne" value="Next">  
  </form>

<?php endif; ?>


</body>
</html>

Upvotes: 0

Views: 1966

Answers (1)

Jairus
Jairus

Reputation: 846

You are setting your session variables to "" at the top of your script.

Check if your variable is set before setting to blank.

Check if Session Variable is Set First

<?php
//If variable is set, use it. Otherwise, set to null.
// This will carry the variable session to session.
$entryOne   = isset($_REQUEST['entryOne'])  ? $_REQUEST['entryOne'] : null;

if($entryOne) {
    doSomething();
}
?>

Tips

  1. Then you can use <?= notation to also echo the variable.
  2. Do this $_SESSION['variable'] instead of $_SESSION['$variable'] (you'll spare yourself some variable mistakes).
<h2>Second page</h2>
  <p>Entry from first Page: <?= $entryOne ?></p>

Example Script

This could be dramatically improved, but for a quick pass:

<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);

//Check that no special characters were entered. If so, set error 
function hasIllegalChar($input){
    $illegalChar = '/[\'\/~`\!@#\$%\^&\*\(\)_\-\+=\{\}\[\]\|;:"\<\>,\.\?\\\]/';
    if (preg_match($illegalChar, $input)) {
        return true;
    } 

    return false;
}

session_start();

// Destroy session and redirect if reset form link is pressed.
if(isset($_GET['resetForm']) && $_GET['resetForm'] == "yes")
{
    echo "SESSION DESTROY";
    session_destroy();
    header("Location: ?");
}

// Session
$page     = isset($_SESSION['page'])      ? $_SESSION['page'] : 1;
$errors   = []; 

// Value history.
$valueOne = isset($_SESSION['valueOne']) ? $_SESSION['valueOne'] : null;
$valueTwo = isset($_SESSION['valueTwo']) ? $_SESSION['valueTwo'] : null;

// Clean inputs here
$fieldOne = isset($_REQUEST['fieldOne']) ? trim($_REQUEST['fieldOne']) : null;
$fieldTwo = isset($_REQUEST['fieldTwo']) ? trim($_REQUEST['fieldTwo']) : null;

// First form
if ($page == 1) {
    // If field two is submitted:
    if ($fieldOne) {

        //Validate inputs
        if(hasIllegalChar($fieldOne)) {
            $errors[] = "You entered an invalid character.";
        }

        if (count($errors) == 0 ){
            $valueOne = $_SESSION['valueOne'] = $fieldOne;
            $page = $_SESSION['page'] = 2;
        }
    }       
}
// Second form
else if ($page == 2) {
     // If field two is submitted:
     if ($fieldTwo) {

        //Validate inputs
        if(hasIllegalChar($fieldTwo)) {
            $errors[] = "You entered an invalid character.";
        }

        if (count($errors) == 0 ){
            $valueTwo = $_SESSION['valueTwo'] = $fieldTwo;
            $page = $_SESSION['page'] = 3;
        }
    }       
}

?>

<!DOCTYPE HTML>  
<html>
    <head>
        <title>PHP Test</title>
        <style>
        .error {
            color: #FF0000;
        }
        </style>
    </head>
    <body>  
        <?php 
        // troubleshoot
        if (true) {
            echo "<pre>";
            var_dump($_REQUEST);
            var_dump($_SESSION);
            echo "</pre>";
        }

        echo "<h1>Page " . $page . '</h1>';
        if (count($errors) > 0) {
            $errorMsg = implode('<br/>',$errors);
            echo '<div class="error">Some errors occurred:<br/>' . $errorMsg . '</div>';
        } 
        ?>

        <?php if ($page == 3): ?>
          <h2>Overview</h2>
          <p>First entry: <?= $valueOne;?></p>
          <p>Second Entry: <?= $valueTwo;?></p>
          <a href="<?= $_SERVER["PHP_SELF"] ?>?resetForm=yes">Reset</a>


        <?php elseif ($page == 2): ?>
          <p>Entry from first Page: <?= $valueOne; ?></p>

          <form method="post" action="<?= $_SERVER["PHP_SELF"] ?>">  
            Entry Two: <input type="text" name="fieldTwo" value="<?= $fieldTwo ?>" autofocus>
            <br><br>
            <input type="submit">  
          </form>

        <?php else: ?>
          <form method="post" action="<?= $_SERVER["PHP_SELF"] ?>">  
            <br><br>
            Entry One: <input type="text" name="fieldOne" value="<?= $fieldOne; ?>" autofocus>
            <br><br>
            <input type="submit">  
          </form>

        <?php endif; ?>
</body>
<html>

You can run the following command to test out the page without using a fancy tool like WAMP or LAMP.

php -S localhost:8000 index.php

You can now access in the browser at http://localhost:8000.

Upvotes: 1

Related Questions