Jump to content

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


xn1

Recommended Posts

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

Link to comment
Share on other sites

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. :-)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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
?>

 

Link to comment
Share on other sites

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'?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
     }
?>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.