BHS DESIGN - PHP Form Validation

Page Info

Page Title: PHP Form Validation
Description: How to validate a PHP form and keep ease of use at the forefront.
Author: lowe_22
Submission Date: 22-01-2006 09:30

Rating & Comments

View or add comments:

(0)
Average members rating:

8.00

Ok, say you have an html form and you want to make sure that users input data that is correct in each field.

As ease of use is the mose important thing for a website, incorrect fields should be clerly marked and in this tutorial i will show you one way in which to do this.

At the top of your PHP page, you want to include all the if statemtns that will be executed if the form has been submitted.
Here is an example:

Code :
// hide source code
// hide line numbers



 1  
 2  
 3  if(isset($_POST['submit'])){     // if the form has ben submitted...
 4  
 5  $formerror = FALSE;   // define the variable
 6  
 7  //now define the variables for the email if all goes well
 8  
 9  $to = "emailaddress@emailaddress.com"; // email will be sent to...
10  $subject = "Hello"; //subject
11  $emailmessage= "Name: $user n Email: $emailnn"; // content of email
12  $from = "From: $email" . "rn" . "Reply-To: $email"; //whos the emails from and who to reply to
13  
14  //now we check the input fields
15  
16  if(empty($_POST['name'])) {   // if the name field is blank, $name does not exist
17  $nameerror = TRUE;
18  $name = FALSE;       
19  } else { // name field filled out
20  $name = $_POST['name'];
21  }
22  
23  if(empty($_POST['email'])) {   // if the email field is blank, $email does not exist
24  $emailerror = TRUE;
25  $email = FALSE;       
26  } else { // name field filled out
27  $email = $_POST['email'];
28  }
29  
30  if ($name && $email) { // so we check to see if all the variables exist (i.e. no errors)
31  
32  /* send mail and define thank you message. */
33  
34  mail($to, $subject, $emailmessage, $from);
35  $message = "<p class='formok'>Thank you for your information. It has been successfully sent to us.</p>";
36  
37  } // end if($name && $email)
38  
39  } // end if(isset($_POST['submit']))
40  
41  
42  }

Further down the page, perhaps under you html form title, you would want to insert this code. this will display a message if the form has not been filled in. We use the formerrormessage class, which makes the text bold and red, I'll give you an example at the end of the tutorial.

Code :
// hide source code
// hide line numbers



1  <? if ($nameerror) { // if there nameerror exists...
2   echo "<p class="formerrormsg">
3  An error has occured. Please make sure the outlined fileds are filled in correctly</p>"; } ?>

Now all the validation has been taken care of, we need to draw our form! So here is what we would type:

Code :
// hide source code
// hide line numbers



 1  
 2  // create a form making sure the action is the same file.
 3  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
 4  
 5  // we create an input field
 6  Name: <input size="40" name="name" type="text" id="name" 
 7  
 8  // here we check to see if there is an error, and if there is, we add the class "formerror" which adds a 2px red border around the input field ( this class can be found  at the end of the tutorial. )
 9  
10                        <? if ($nameerror) {
11              echo "class='formerror'";
12              }?>
13              value="<?= $_POST['name']?>"> // on this line we keep the information the user has entered in the box - for correcting if there is an error, 
14  
15  //so we create another input for the email...
16  
17  Email: <input name="email" type="text" id="email"
18              <? if ($emailerror) {
19              echo "class='formerror'";
20              }?>
21              value="<?= $_POST['email']?>" size="40">  
22  <br /><br />
23  <input type="submit" name="submit" value="Submit"> // add a submit button

Ok so that's it! All there is left to do is define the CSS classes we have called in the PHP: "formerrormessage" and "formerror". these look like this:

Code :
// hide source code
// hide line numbers



1  
2  
3  .formerror        {border: 2px #FF0000 solid;}
4  .formerrormsg    {color: #FF0000;}
5

So when a user enters his name, but not his email address and submits the form, a message shows saying "An error has occured. Please make sure the outlined fileds are filled in correctly." and the empty field is now outlined in red.

The script can be modified, of course, to contain a better email validation script - the lack of an "@" for example, but one basic method is outlined above.

I hope this tutorial has been of help.
Feel free to email me with any questions - mrtriangle@gmail.com

Olly,
(lowe_22)

Donation:

If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months.