Show error to the side of the input feild (Form)

xn1 · March 18, 2011

Hi all,

Having a (probably basic) problem here, and as much as I have read about it, I still don't understand.

I have a basic form in a page called book.php which upon submit calls sendmail.php to email me the details. Everything works as it should, including my current error handler, which is as follows.

elseif (empty($name) || empty($number) || empty($profexp) || empty($nonprofexp)) { 

    header( "Expires: Mon, 20 Dec 1998 01:00:00 GMT" );
    header( "Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT" );
    header( "Cache-Control: no-cache, must-revalidate" );
    header( "Pragma: no-cache" );
    ?>

    <html>
    <head><title>Error</title></head>
    <body>
    Error
    <p>
    Oops, it appears you forgot to fill in all of your details.
    Please press the BACK button in your browser and try again.
    </p>
    </body>
    </html>

    <?php
  }

This is fine, but what I would prefer is a seperate error for each user input section. So, for example, when the user does not enter anything in the $name feild and presses submit, the book.php page is displayed with the error message to the right of the text box. Any help would be appreciated.

Thank you

BlueSkyIS · March 18, 2011

If there is an error for a specific field, echo an error statement to the right of it.

cyberRobot · March 18, 2011

For me, the easiest way is to process the form submission on the same page as the form. So instead of sending the form to "sendmail.php", change it to book.php. Then create an if statement which processes the form if it was submitted or it prepares to display the form if it hasn't.

ocpaul20 · March 18, 2011

You could always place an error message into a SESSION variable and show that (or blank if no error) in the html. I suspect what you need is some javascript validation routines but thats a whole new ball game.

before you come in, set error messages to blank, red_span_start & end are span on /off which turn the characters red

<input ...... /> <?php echo $red_span_start.$_SESSION['error1message'].$red_span_end; ?>

does that make sense?

something like that maybe for each field?

Just an idea. :-)

xn1 · March 18, 2011

Ok so taking a few suggestions. To process the form in the same page do I just put the php code after the form?

Then the echo error messages, would these appear after submitting without reloading the page? And also, its the generation of these messages I'm stuck with, after my if empty check what code do I put?

Thank you for your help

ocpaul20 · March 18, 2011

to process the form on the same page, you submit the form with a blank program name. That loads the same program. When you come in, you check a $_POST field to see it it is set and if it = the value on your submit button.

<?php
if (isset($_POST['submitbutton'])) {
  if ($_POST['submitbutton'] == 'Submit') {      
      if ($_POST['hidval'] == 'some_hidden_value') {
           // we have come from our form, not someone elses page
           // process the form here
           exit; // done
      }
  }
}
// otherwise drop through and display the HTML form
?>
<form method="post" name="form1" action = "">
<INPUT name="submitbutton" type="submit" value="Submit" />				
<INPUT type="hidden" name="hidval" value="some_hidden_value" />
</form>

thats me done

xn1 · March 18, 2011

Ok, that made sence thank you, just need to work out how to generate the error codes to echo them.

cyberRobot · March 18, 2011

to process the form on the same page, you submit the form with a blank program name.

Or the action attribute can be set to whatever the filename is:

<form method="post" name="form1" action="book.php">

Taking what ocpaul20 provided for code, you can get the error icon next to the field by doing something like this:

<?php
//INITIALIZE ERROR VARIABLES
$errorFound = false;
$errorIcon['fname'] = '';
...

if (isset($_POST['submitbutton'])) { 
     //TEST FORM INFORMATION
     if(trim($_POST['fname']) == '') {
          $errorIcon['fname'] = 'First name is required';
          $errorFound = true;
     }
    ....
    
     //IF NO ERRORS WERE FOUND, CONTINUE PROCESSING
     if (!$errorFound) {
          ...
          exit(); // done
     }
}

//DISPLAY FORM
?>
<form method="post" name="form1" action = "">
<INPUT name="submitbutton" type="submit" value="Submit" /> 
<label for="fname">First Name:</label> <input type="text" name="fname" id="fname" value="<?php print htmlentities($_POST['fname']); ?>" /><?php echo $errorIcon['fname']; ?>
</form>

Note that the code is untested, but it should get you started.

xn1 · March 18, 2011

Hmm, must admit that lost me a bit, where would it fit in this

<?php
  $name = $_REQUEST['name'] ;
  $number = $_REQUEST['number'] ;
  $profexp = $_REQUEST['profexp'];
  $nonprofexp = $_REQUEST['nonprofexp'];

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: me@mydomain.co.uk' . "\r\n"; 


mail( "me@gmail.com", "Driving Lesson Enquiry",
"Hi Chris,\n\n$name has requested information on lessons.\nPlease call them on $number.\n\nThey have had $profexp hours of profesional tutoring and $nonprofexp hours of practice" ,  $headers );

header( "Location: thankyou.php" );
}
?>

And can you recommend a good book in php

cyberRobot · March 18, 2011

That code would be split up. The part that reads in the form data would be inside the first if that checks if the form was submitted and before running all the tests to make sure the fields aren't blank.

The second part which sends out the e-mail and redirects to thankyou.php would go in the if statement which only gets executed if there weren't any errors right above the exit() function.

<?php
//INITIALIZE ERROR VARIABLES
$errorFound = false;
$errorIcon['name'] = '';
...

if (isset($_POST['submitbutton'])) { 
     //GET FORM INFORMATION                              //<--- part one of your code
     $name = $_REQUEST['name'];
     $number = $_REQUEST['number'];
     $profexp = $_REQUEST['profexp'];
     $nonprofexp = $_REQUEST['nonprofexp'];     //<--- end of part one

     //TEST FORM INFORMATION
     if(trim($_POST['name']) == '') {
          $errorIcon['name'] = 'Name is required';
          $errorFound = true;
     }
    ....
    
     //IF NO ERRORS WERE FOUND, CONTINUE PROCESSING
     if (!$errorFound) {
          $headers = 'MIME-Version: 1.0' . "\r\n";        //<--- second part of your code
          $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
          $headers .= 'From: me@mydomain.co.uk' . "\r\n";

          mail( "me@gmail.com", "Driving Lesson Enquiry", "Hi Chris,\n\n$name has requested information on lessons.\nPlease call them on $number.\n\nThey have had $profexp hours of profesional tutoring and $nonprofexp hours of practice" ,  $headers );

          header( "Location: thankyou.php" );}          //<--- end of second part

          exit(); // done
     }
}

//DISPLAY FORM
?>
<form method="post" name="form1" action = "">
<INPUT name="submitbutton" type="submit" value="Submit" /> 
<label for="name">Name:</label> <input type="text" name="name" id="name" value="<?php print htmlentities($_POST['name']); ?>" /><?php echo $errorIcon['name']; ?>
</form>

Of course there is a lot more work to be done, but hopefully this gives you a better idea of how to use the code.

xn1 · March 18, 2011

I can not thank you enough, I actually understand how it works now. I always find code hard to understand out of my context.

cyberRobot · March 18, 2011

No problem; let us know if you have any other questions.

xn1 · March 18, 2011

Me again sorry, I've implemented the first part of the code and i keep getting "HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfil the request"

<?php
//INITIALIZE ERROR VARIABLES
$errorFound = false;
$errorIcon['name'] = '';
$errorIcon['number'] = '';
$errorIcon['profexp'] = '';
$errorIcon['nonprofexp'] = '';

if (isset($_POST['submitbutton'])) { 
     //GET FORM INFORMATION                              //<--- part one of your code
     $name = $_REQUEST['name'];
     $number = $_REQUEST['number'];
     $profexp = $_REQUEST['profexp'];
     $nonprofexp = $_REQUEST['nonprofexp'];     //<--- end of part one

     //TEST FORM INFORMATION
     if(trim($_POST['name']) == '') {
          $errorIcon['name'] = 'Name is required';
          $errorFound = true;
     }
     if(trim($_POST['number']) == '') {
          $errorIcon['number'] = 'Number is Required';
          $errorFound = true;
     }
     if(trim($_POST['profexp']) == '') {
          $errorIcon['profexp'] = 'Please Select';
          $errorFound = true;
     }
     if(trim($_POST['nonprofexp']) == '') {
          $errorIcon['nonprofexp'] = 'Please Select';
          $errorFound = true;
     }
    
     //IF NO ERRORS WERE FOUND, CONTINUE PROCESSING
     if (!$errorFound) {
          $headers = 'MIME-Version: 1.0' . "\r\n";        //<--- second part of your code
          $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
          $headers .= 'From: me@domain.co.uk' . "\r\n";

          mail( "me@gmail.com", "Driving Lesson Enquiry", "Hi Chris,\n\n$name has requested information on lessons.\nPlease call them on $number.\n\nThey have had $profexp hours of profesional tutoring and $nonprofexp hours of practice" ,  $headers );

          header( "Location: thankyou.php" );}          //<--- end of second part

          exit(); // done
     }
}

//DISPLAY FORM
?>



	<form method="post" name="form1" action="">

		<div id="form-name">
			<input class="formstyle" type="text" name="name" id="name" value="<?php print htmlentities($_POST['name']); ?>" /><?php echo $errorIcon['name']; ?>
		</div>


		<div id="form-number">
			<input class="formstyle" name="number" type="text" />
		</div>

		<div id="form-profexp">
			<select class="formstyle" name="profexp">
      			        <option value="" selected="">Please Select</option> 
			<option value=" 0">0</option>
			<option value=" 1">1</option>
			<option value=" 2">2</option>
			<option value=" 3">3</option>
			<option value=" 4">4</option>
			<option value=" 5">5</option>
			<option value=" 6">6</option>
			<option value=" 7">7</option>
			<option value=" 8">8</option>
			<option value=" 9">9</option>
			<option value=" 10+">10+</option>
			</select>
		</div>

		<div id="form-nonprofexp">
			<select class="formstyle" name="nonprofexp">
      				<option value="" selected="">Please Select</option> 
			<option value=" 0">0</option>
			<option value=" 1">1</option>
			<option value=" 2">2</option>
			<option value=" 3">3</option>
			<option value=" 4">4</option>
			<option value=" 5">5</option>
			<option value=" 6">6</option>
			<option value=" 7">7</option>
			<option value=" 8">8</option>
			<option value=" 9">9</option>
			<option value=" 10+">10+</option>
			</select>
		</div>

		<div id="form-submit">
			<input id="submitbutton" name="submitbutton" type="submit" value="Submit" /> 
		</div>

		</form>

xn1 · March 19, 2011

Actually scratch that last message, everything works now, when you don't put anything in the box it reloads the form with any information you've filled in already. However it still doesn't display the error message, I've looked it over and over again and can't see why not.

This is the error next to the input box in the form


<input class="formstyle" type="text" name="number" id="number" value="<?php print htmlentities($_POST['number']); ?>" /><?php echo $errorIcon['number']; ?>

And this is the php code in full


<?php
//INITIALIZE ERROR VARIABLES
$errorFound = false;
$errorIcon['name'] = '';
$errorIcon['number'] = '';
$errorIcon['profexp'] = '';
$errorIcon['nonprofexp'] = '';

if (isset($_POST['submitbutton'])) { 
//GET FORM INFORMATION
     $name = $_REQUEST['name'];
     $number = $_REQUEST['number'];
     $profexp = $_REQUEST['profexp'];
     $nonprofexp = $_REQUEST['nonprofexp'];

     //TEST FORM INFORMATION
     if(trim($_POST['name']) == '') {
          $errorIcon['name'] = 'Name is required';
          $errorFound = true;
     }
     if(trim($_POST['number']) == '') {
          $errorIcon['number'] = 'Number is Required';
          $errorFound = true;
     }
     if(trim($_POST['profexp']) == '') {
          $errorIcon['profexp'] = 'Please Select';
          $errorFound = true;
     }
     if(trim($_POST['nonprofexp']) == '') {
          $errorIcon['nonprofexp'] = 'Please Select';
          $errorFound = true;
     }
    
     //IF NO ERRORS WERE FOUND, CONTINUE PROCESSING
     if (!$errorFound) {
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: me@domain.co.uk' . "\r\n";

     mail( "me@gmail.com", "Driving Lesson Enquiry", "Hi Chris,\n\n$name has requested information on lessons.\nPlease call them on $number.\n\nThey have had $profexp hours of profesional tutoring and $nonprofexp hours of practice" ,  $headers );

     header( "Location: thankyou.php" );}

     exit(); // done
     }
//DISPLAY FORM
?>

cyberRobot · March 19, 2011

If you leave the "number" field blank, does the corresponding if statement get executed? To see, try to print something inside the if statement:

...

     if(trim($_POST['number']) == '') {
          $errorIcon['number'] = 'Number is Required';
          $errorFound = true;

          echo 'here - number is field blank';
     }

...

If the text gets displayed, the error variables should be set. So the next test would be to see if the variable contains data:

...

     if(trim($_POST['number']) == '') {
          $errorIcon['number'] = 'Number is Required';
          $errorFound = true;
     }

     echo $errorIcon['number'];

...

Do it display 'Number is Required'?

xn1 · March 19, 2011

The text didnt get displayed at all, it's not setting the error variable

cyberRobot · March 19, 2011

It's probably not causing the problem, but you'll want to be consistant with your variable names. Note that your getting the form information with the following:

...

$name = $_REQUEST['name'];
$number = $_REQUEST['number'];
$profexp = $_REQUEST['profexp'];
$nonprofexp = $_REQUEST['nonprofexp'];

...

But later on, the code is using the $_POST version:

...

if(trim($_POST['name']) == '') {

...

I probably should have paid more attention when suggesting code earlier. Sorry for the confusion.

xn1 · March 19, 2011

Ah I see, i try that and let you know

xn1 · March 19, 2011

I've changed all of the requests to posts and still no error messages :confused:

I knows there are errors as it reloads the form with the previous values that have been keyed in until they're all filled in, its just not displaying any messages

cyberRobot · March 19, 2011

What happens if you type something into the "number" field and leave everything else blank?

xn1 · March 19, 2011

The page reloads with the form, and the number i typed in is still there. And keeps doing so until the whole form is populated. Would iy help to post the pages whole code. I've tried everything I can think of but no luck

cyberRobot · March 19, 2011

That might be helpful (posting the entire script; including the form). I'm just not seeing anything that would cause the issue.

xn1 · March 19, 2011

Ok here goes, excuse any messyness

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="StyleSheet" type="text/css" href="resource/div.css" />
<link rel="StyleSheet" type="text/css" href="resource/links.css" />
<link rel="icon" href="resource/favicon.ico" type="image/x-icon" />
</head>

<body>
<div id="container">

	<div id="header">
	<?php include('resource/links/navigation.php');?> 
	<?php include('resource/links/fb-link.php');?> 
	</div>

	<div id="content-book">



	<form method="post" id="form1" name="form1" action="">

		<div id="form-name">
			<input class="formstyle" type="text" name="name" id="name" value="<?php print htmlentities($_POST['name']); ?>" /><?php echo $errorIcon['name']; ?>
		</div>


		<div id="form-number">
			 <input class="formstyle" type="text" name="number" id="number" value="<?php print htmlentities($_POST['number']); ?>" /><?php echo $errorIcon['number']; ?>
		</div>

		<div id="form-profexp">
			<?php $experience = array('Please Select',' 0',' 1',' 2',' 3',' 4',' 5',' 6',' 7',' 8',' 9',' 10+',);
			echo'<select name="profexp">'; 
			foreach($experience as $value){ 
			echo '<option value="'.$value.'"';
			if ($_POST['profexp'] == $value) {
    				echo ' selected="selected" ';
			} 
			echo '>'.$value.'</option>';
			}
			echo'</select>';
			echo $errorIcon['profexp']; ?>
		</div>

		<div id="form-nonprofexp">
			<?php
			echo'<select name="nonprofexp">'; 
			foreach($experience as $value){ 
			echo '<option value="'.$value.'"';
			if ($_POST['nonprofexp'] == $value) {
			echo ' selected="selected" ';
			} 
			echo '>'.$value.'</option>';
			}
			echo'</select>';
			echo $errorIcon['profexp']; ?>
		</div>

		<div id="form-submit">
			<input id="submitbutton" name="submitbutton" type="submit" value="Submit" /> 
		</div>
		</form>

	</div>

	<div id="footer">
	</div>

</div>

</body>
</html>

<?php
//INITIALIZE ERROR VARIABLES
$errorFound = false;
$errorIcon['name'] = '';
$errorIcon['number'] = '';
$errorIcon['profexp'] = '';
$errorIcon['nonprofexp'] = '';

if (isset($_POST['submitbutton'])) { 
//GET FORM INFORMATION
     $name = $_POST['name'];
     $number = $_POST['number'];
     $profexp = $_POST['profexp'];
     $nonprofexp = $_POST['nonprofexp'];

     //TEST FORM INFORMATION
     if (isblank($_POST['name'])) {
          $errorFound = true;
          $errorIcon['name'] = 'Name is Required';
     }
     if(trim($_POST['number']) == '') {
          $errorIcon['number'] = 'Number is Required';
          $errorFound = true;
     }
     if(trim($_POST['profexp']) == 'Please Select') {
          $errorIcon['profexp'] = 'Please Select';
          $errorFound = true;
     }
     if(trim($_POST['nonprofexp']) == 'Please Select') {
          $errorIcon['nonprofexp'] = 'Please Select';
          $errorFound = true;
     }
    
     //IF NO ERRORS WERE FOUND, CONTINUE PROCESSING
     if (!$errorFound) {
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: me@mydomain.co.uk' . "\r\n";

     mail( "me@gmail.com", "Driving Lesson Enquiry", "Hi Chris,\n\n$name has requested information on lessons.\nPlease call them on $number.\n\nThey have had $profexp hours of profesional tutoring and $nonprofexp hours of practice" ,  $headers );

     header( "Location: thankyou.php" );}

     exit(); // done
     }
?>

cyberRobot · March 19, 2011

The first issue is that the form needs to go below the error checking code. You should be able to move the entire PHP portion above the DOCTYPE.

xn1 · March 19, 2011

Ok that's done, now upon pressing the submit button to soon, the page turns white.

Sorry for taking up all of your time.

Sign In

Show error to the side of the input feild (Form)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information