Form asks for missing info before the user has even entered anything!

Hi,

I intend to use the code below for a basket system, asking for customer name, email, telephone, etc. The form is validated and reloads with the correct information and highlighting the missing info. that needs completing.

The problem is when the form is first loaded it says you have not filled in these parts of the form (which is obvious and looks daft).

Here’s the code. How can I code it to say if the user has never tried submitting the form do not say you have not filled in these fields?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<?php
if ($_POST['submit'])
{
	$firstname = $_POST['name'];
	$surname = $_POST['surname'];
		$email = $_POST['email'];
			$telephone = $_POST['telephone'];
$errorstring = "";
}
if (!$name)
$errorstring = $errorstring."Name<br>";
if (!$surname)
$errorstring = $errorstring."Surname<br>";
if (!$email)
$errorstring = $errorstring."Email<br>";
if (!$telephone)
$errorstring = $errorstring."Telephone<br>";

if ($errorstring!=""){
echo "Please complete the following:<br>$errorstring";
}
else
{
	die("success!");
}
	?>
<p>
</p>
<form action='submitform.php' method='POST'>
First Name:<br>
<input type='text' name='name' value='<?php echo $name; ?>' ><p>
Surname:<br>
<input type='text' name='surname' value='<?php echo $surname; ?>'> <p>
Email:<br>
<input type='text' name='email' value='<?php echo $email; ?>'><p>
Telephone:<br>
<input type='text' name='telephone' value='<?php echo $telephone;?>'><p>
<input type='submit' name='submit' value='Send'><p>

</form>
</body>
</html>

You should move those checks for submitted strings, to inside the block where you check to see if the form is submitted.

Maybe an example would be better.


<?php
$errors = array();

if('POST' === $_SERVER['REQUEST_METHOD']){
  
  if(empty($_POST['name'])){
    array_push($errors, 'Name cannot be empty');
  }
  
  if(empty($_POST['email'])){
    array_push($errors, 'Email cannot be empty');
  }
  
  if(empty($_POST['phone'])){
    array_push($errors, 'Phone number cannot be empty');
  }
  
  if(0 === count($errors)){
    echo 'Submitted!';
    exit;
  }
  
}
?>
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <?php if(0 < count($errors)): ?>
      <ul id="errors">
        <?php foreach($errors as $error): ?>
          <li><?php echo $error; ?></li>
        <?php endforeach; ?>
      </ul>
    <?php endif; ?>
    <!-- Form goes here -->
  </body>
</html>

Your code looks an improvement upon what I was using. It looks like you suggest the error message can appear above the field which is incorrect. My coding simply listed the empty fields at the start of the page.

Is it indeed possible to include a separate error messages above the field which is left blank, rather than have the error messages all appear at the top of the page?

I did see a web site I like which put a rectangular red box around the empty field but this was done with JavaScript. I want to avoid JavaScript.

Matt.

With a small modification, sure you can do that.


<?php
$errors = array();

if('POST' === $_SERVER['REQUEST_METHOD']){
  
  if(empty($_POST['name'])){
    $errors['name'] = 'Name cannot be empty';
  }
  
  if(empty($_POST['email'])){
    $errors['email'] = 'Email cannot be empty';
  }
  
  if(empty($_POST['phone'])){
    $errors['phone'] = 'Phone number cannot be empty';
  }
  
  if(0 === count($errors)){
    echo 'Submitted!';
    exit;
  }
  
}
?>
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <form method="post" action="#">
      
      <?php if(isset($errors['name'])): ?>
        <p class="error"><?php echo $errors['name']; ?></p>
      <?php endif; ?>
      
      <label for="name">Name:</label>
      <input id="name" name="name" type="text" />
      
      <?php if(isset($errors['email'])): ?>
        <p class="error"><?php echo $errors['email']; ?></p>
      <?php endif; ?>
      
      <label for="email">Email:</label>
      <input id="email" name="email" type="text" />
      
      <?php if(isset($errors['phone'])): ?>
        <p class="error"><?php echo $errors['phone']; ?></p>
      <?php endif; ?>
      
      <label for="phone">Phone:</label>
      <input id="phone" name="phone" type="text" />
      
      <input type="submit" value="submit" />
    </form>
  </body>
</html>

Also (Although Anthony’s example has done so, its worth pointing out explicitly) dont use isset($_POST[‘submit’]) due to the IE Bug.

You say the example is wrong but did you make a typo? I cannot find $_POST[‘submit’] in the code.

Also, I plan to use a table to display the text and text boxes like this:
(do you advise against using tables to display such information?)

<tr>
<td>
<table class="contact_details">
<tbody>
<tr>
<td>
<label>Title </label>
</td>
<td>
<select class="delivering_method" name="title">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Forename *</label>
</td>
<td>
<input type="TEXT" value="" maxlength="250" size="40" name="forename">
</td>
</tr>
<tr>
<td>
<label>Surname *</label>
</td>
<td>
<input type="TEXT" value="" maxlength="250" size="40" name="surname">
</td>
</tr>
<tr>
<td>
<label>Company Name </label>
</td>
<td>
<input type="TEXT" value="" maxlength="250" size="40" name="company">
</td>
</tr>

Matt.

No, I said Anthony’s code had already taken care of the potential problem - your original code was checking against $_POST[‘submit’].

oh - ok - thanks for pointing that out