Step 1: Add PHP Functions for Setting/Resetting Variables

In the last post, we set the form up so the value for each form field is set to a corresponding PHP variable. Now we need to make sure that when the form field changes and a user action (like submitting the form) takes place, the PHP variables get set to the newly updated form field values.  This is a simple process, as we just have to create a function to set the PHP variables.  And while we’re at it, we can create another function to reset the PHP variables for our ‘Clear Form’ button.  Here are the functions we’ll use.  Note that we need to use the ‘global’ keyword inside the functions to access and successfully update the variables.

function setVariables() {
   global $user_name;
   $user_name = $_POST["user_name"];
   global $user_email;
   $user_email = $_POST["user_email"];
   global $user_message;
   $user_message = $_POST["user_message"];
}
function resetVariables() {
   global $user_name;
   $user_name = "";
   global $user_email;
   $user_email = "";
   global $user_message;
   $user_message = "";
}

Again, these functions will eventually get called when a user clicks on the Submit or Reset button, respectively.

Step 2: Add PHP Functions for Form Field Validation

Now it’s time to write out the validation functions for the form.  In our example, we have three fields.  The name and message fields will be a simple character count for their validation.  In the email validation, we will use one of the well known regular expressions that will check the email value for correct syntax.

For the simple text input, we’ll create a function that accepts two arguments.  The first argument will be the value to get validated, and the second will be the minimum number of characters that need to be present in the first value.  Inside the function, there will be some simple conditional logic that will check the string length of the first value to the minimum number of characters.  We’ll also set a return value of ‘y’ or ‘n’ so we’ll know whether or not our value is valid.  Here’s what our simple text input validation function will look like:

function validateTextInput($str, $minLength=1) {
   if (strlen($str) < $minLength) {
      $lValid = 'n';
   } else {
      $lValid = 'y';
   }
   return $lValid;
}

For the email validation function, we’ll simply pass in the value to check as the one and only argument.  Inside the function, the conditional logic checks the value against the aforementioned regular expression.  And, like the text input validation function above, this one also returns a ‘y’ or ‘n’ value telling us whether or not the value is valid.  Here’s what our email validation function will look like:

function validateEmail($str) {
   if (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $str)) {
      $lValid = 'n';
   } else {
      $lValid = 'y';
   }
   return $lValid;
}

Step 3: Add PHP Function for Overall Form Validation

Now that we have set up the individual form field validation functions, we’ll need a master function that will be called when the user clicks the Submit button.  It will validate all of our fields, and will hold logic to either show an error or send the form.  Here’s what the function will look like.  An explanation of the function is below the function.

function validateForm() {
   $default_error = "There was a problem with your entry. Please correct the following fields.";
   $error = "";

   // Set up global variables to check
   global $user_name;
   global $user_email;
   global $user_message;

   // Perform validation for fields
   $valid_user_name = validateTextInput($user_name, 1);
   $valid_user_email = validateEmail($user_email);
   $valid_user_message = validateTextInput($user_message, 5);

   if ($valid_user_name != 'y') {
      $error .= "<li>Your Name</li>";
   }
   if ($valid_user_email != 'y') {
      $error .= "<li>Your Email</li>";
   }
   if ($valid_user_message != 'y') {
      $error .= "<li>Message</li>";
   }

   // Return error value or send form
   if ($error) {
      echo "<div class=\"error\">";
      echo "<label>" . $default_error . "</label>";
      echo "<ul>";
      echo $error;
      echo "</ul>";
      echo "</div>";
   } else {
      sendForm();
   }
}

First, the function will have two variables: $default_error and $error.  As you noticed, the $default_error has the general text calling out that there’s an error, and the $error variable is blank by default.

Next, we set up the global variables that we need to check.

Third, we set up a unique variable that will be set to the return value of our individual field validation functions.  After these variables are set up, we put in conditional logic that appends the $error variable with <li> tags if the variable isn’t set to ‘y’.

Finally, there is conditional logic that checks the $error variable.  If this variable is set to anything other than its default blank value, we echo out some HTML markup that writes out our $default_error message, and then lists out each individual form field that is invalid.  If the variable is still blank, we call the sendForm() function (not included in this article – you can write that out depending on the needs of your project).

Step 4: Add Markup and Logic for Submit and Reset Button Actions

Now that we have everything set up, we obviously need to be able to call our validation and reset functions, based on what button the user clicks.  I am a fan of putting this logic inside of a <div> tag at the top of the form.  Since the validation function echos out a message if invalid, it will thus echo out to a div tag that we can style however we want.  Same with the reset logic, as we will first display a “are you sure you want to reset?” message with a ‘Yes’ and ‘No’ button.  Here’s the markup we’ll insert for this logic, that we’ll place between the opening <form> tag and the first <label>.

<!-- Error Message -->
<div id="error-message">
   <?php
   if ($_POST["submit"]) {
      setVariables();
      validateForm();
   }
   ?>
</div>

<!-- Reset Confirmation Message -->
<div id="confirm-reset">
   <?php
   if (isset($_POST['reset'])) {
      setVariables();
      echo "<div class=\"confirm\">";
      echo "<label>Are you sure you want to reset?</label>";
      echo "<div class=\"hidden\"><br /></div>";
      echo "<input type=\"submit\" class=\"button\" name=\"reset-yes\" value=\"Yes\" />";
      echo "<div style=\"display:inline; width:16px;\">&nbsp;&nbsp;</div>";
      echo "<input type=\"submit\" class=\"button\" name=\"reset-no\" value=\"No\" />";
      echo "</div>";
   } else if (isset($_POST['reset-no'])) {
      setVariables();
   } else if (isset($_POST['reset-yes'])) {
      resetVariables();
   }
   ?>
</div>

As you see, the error message <div> tag has conditional logic that checks for $_POST["submit"].  If our submit button is clicked, the two functions inside this conditional statement are fired off.  First, we call the setVariables() function, which as outlined above, sets all of our global PHP variables to the value of the form fields.  After we have called this function, we call our validateForm() function that validates each field and checks whether to display an error message or send the form.

The reset <div> tag is a bit more detailed.  Our form ‘Reset’ button is set up with name ‘reset’, which is equivalent to $_POST['reset'].  This is the first check of our conditional logic here, which calls the setVariables(), and echos out a <div> tag with the reset confirmation message and accompanying ‘Yes’ and ‘No’ buttons.

The second and third checks of the reset conditional logic check for the ‘Yes’ and ‘No’ button clicks.  If the ‘No’ button is clicked, we simply call the setVariables() function.  If the ‘Yes’ button is clicked, we call the resetVariables() function which as outlined above, resets all variables and therefore erases the form field values.

Wrapping It Up

As I mentioned at the beginning of the article, this is useful because all of the logic is done with PHP, and can thus be used on any browser and device, regardless of how the settings are configured.  What I like to do is to put all of the logic in its own file, and then include it in the page wherever I need it.  That way, if I have a completely separate set of files for full web vs. mobile, for instance, I can still use the same one file that contains the form, and style it with CSS depending on what version of the site the user is seeing.

Also, at this point, feel free to add in your own CSS and/or other HTML markup for how the form is set up and will be displayed.

Also, since there’s A LOT of code and logic here, I have gone ahead and packaged up the files in a zip file that you can download for your convenience.  The zip file includes some sample CSS styles that I have set up to customize the look of the form.

Until next time, happy coding!

With that said, here’s part 1 of how to build a bulletproof form using only HTML, PHP and CSS.

Step 1: Plan Your Form

This first step is important when building out a form.  Rather than just jumping in and starting to throw together a form, it’s helpful (and a big time-saver) to plan out what fields your form will have, and what types of fields they will be.  I find it helpful to either jot this info down on a piece of paper, or write it in pseudo-code inside of a comment block in my working file.  Either way, plan your form fields first.  It will make life much easier as you build out the form, and eventually its validation and processing.

For this tutorial, we’ll build out a form with three fields: Name, Email, and Message.  The form will also have a Submit and Reset button for form processing and resetting.

Step 2: Create PHP Variables for Each Form Field Value

Now that we have the form architecture figured out, we need to assign a PHP variable to each form field.  In our example, this means we’ll need 3 variables.  So at the very top of our file, inside of the PHP wrapper tags (<?php ?>), create a variable for each.  In our example, it will look like this:

<?php
$user_name = "";
$user_email = "";
$user_message = "";
?>

Note: This step could be swapped with step #3 below, but for the sake of brevity in this tutorial, I’m putting it here so we can plug these variable values directly in the form fields when we build out the form in step #3.

Step 3: Build Out the Form

This step is simple, as we just need to put together the pure HTML code for our form.  Our form will have two input fields and one textarea (for the message).  While assembling the code, I’m going to insert some extra <div> and <span> tags that are inserted to break up the form into containers in the absence of CSS.  This is done as a precaution for mobile devices that are not set up to enable CSS.  Many times the default is okay, but I’ve noticed that here and there, you need to hammer it down a little bit.

Another important thing that we’ll do here is to set the value of each form field to its accompanying PHP variable.  This is a setup step that will ensure that our form will “remember” its values, should any of the form fields fail in the validation process (still to come).  You know what I mean here – we’ve all been there – you fill out a long form, submit, and find out that the form is somehow invalid, and all of the form fields are blank again, forcing you to refill the entire thing all over again.  Frustrating, isn’t it?

This is actually much easier than you might think using PHP.  For the input fields, it’s a simple matter of echoing out the PHP variable inside of the ‘value’ attribute of the tag.  For the textarea, you’ll need to echo out the PHP variable between the opening and closing tags.  And don’t worry – since our PHP variables are set as empty strings by default, the fields will also be empty when the form initially loads.  But as the form and validation logic get built out, our PHP variables are set to match the form fields, and thus the form fields will be populated with the “remembered” value of the field (stored in the variables) rather than being blank.

In our example, our form looks a little something like this:

<form action="" method="post" name="contact_form" id="contact_form">
   <div>
      <label for="user_name">Your Name:</label>
         <span class="hidden"><br /></span>
      <input type="text" name="user_name" value="<?php echo $user_name; ?>" autocomplete="off" tabindex="1" />
   </div>
   <div>
      <label for="user_email">Your Email:</label>
         <span class="hidden"><br /></span>
      <input type="text" name="user_email" value="<?php echo $user_email; ?>" autocomplete="off" tabindex="2" />
   </div>
   <div>
      <label for="user_message">Message:</label>
         <span class="hidden"><br /></span>
      <textarea name="user_message" autocomplete="off" wrap="physical" tabindex="3"><?php echo $user_message; ?></textarea>
   </div>
   <div class="centered">
      <input type="submit" name="submit" value="Submit &raquo;" />
      <input type="submit" name="reset" value="Reset Form" />
   </div>
</form>

A few important notes about the form setup:

• We didn’t include any value in the action attribute for the form tag.  This is because we’re going to house all of the form logic within the same file to reduce page-to-page navigation, and the amount of external files we need to concern ourselves with.  There are different schools of thought about this, but this is the method we’ll use for this tutorial.
• As discussed above, PHP markup has been inserted into the form fields as their values.
• Each form field tag has a unique name.  This will be necessary when we start to set/reset variables and validate the form later on down the road.
• Each form field is set up here with the autocomplete attribute set to “off”. This is just more of a security precaution that I like on contact forms, that makes it so the browser doesn’t remember previous values you’ve typed in other forms, in the case that you’re using a public computer that doesn’t delete private browsing history.  (Note: This doesn’t have anything to do with the method we’re using to echo out our PHP variables into the form, as our PHP variable method will simply keep our values in the form upon unsuccessful form submission, whereas the autocomplete attribute would have a dropdown of “remembered” values of past forms when the user starts typing.)
• Overall, I’ve included a number of ids and classes in the form that will be later used to style it with CSS for browsers and mobile devices that have CSS enabled.

What’s Next

We now have the framework for our form, and have set up some of the initial PHP logic to help us populate and store form values.  In the next segment, we’ll work on adding in the variable setting/resetting functionality, as well as the validation functions.  Also, and most importantly, we’ll tie in the Submit and Reset buttons with the correct functionality to make the form do what it’s supposed to do.

Until the next part of this tutorial, happy coding!

The Validation Logic

Here’s a quick rundown of what this EmailValidator class validates:

• Must contain three parts: [1] Local part, [2] @ sign, [3] Domain
• Local part must contain at least one of the following valid characters:
  • Upper and lowercase letters (A-Z, a-z)
  • Numeric Digits (0-9)
  • Other characters: ! # $ % & ‘ * + – / = ? ^ _ ` { | } ~
  • Periods (provided it is not the first or last character, and does not appear more than two times consecutively)
• Domain must contain at least one period, as well as at least one character before the period as well as a valid top-level domain (i.e. com, org, ca, uk) after the last period. Valid domain characters include:
  • Upper and lowercase English letters (A-Z, a-z)
  • Numeric Digits (0-9)
  • Hyphens
  • Periods (provided it is not the first or last character, and does not appear more than two times consecutively)

With that list of validation logic written, I must also confess that, technically speaking, quoted strings and spaces (so long as they are within quotes) are valid in the local-part of an email. However, on the Internet Engineering Task Force (IETF) website, RFC 5321 Section 4.1.2 contends that,

“…a host that expects to receive mail SHOULD avoid defining mailboxes where the Local-part requires (or uses) the Quoted-string form…”

Since the practice of using quoted strings is discouraged by RFC 5321, the logic in my EmailValidator class does NOT allow quoted strings, including the double-quote character and spaces.

An Example

I have included a small Flash email validator file below that you can test the validity of an inputted email address.  It utilizes the EmailValidator class that I have written.  Feel free to test out a range of email addresses.  Note that the validator gives useful feedback about invalid addresses, specifying what the first encountered issue is when checking whether or not the address valid.

Known Issues & Exceptions:

1. Many email providers out there will only accept letters, digits and hyphens as valid in the local part of the email. Though this is becoming more common, the EmailValidator class will still allow any of the valid characters listed above, even if it results in an invalid email address for a specific email client (i.e. */+@gmail.com). This is done to follow the direction of RFC 5322, and the list of valid atom characters listed in Section 3.2.3 that can be included in the local part of an email. Until this list is deprecated (if ever), it’s an exception I’m willing to live with.
2. Though the EmailValidator checks for a valid domain (including only alpha characters, numbers and hyphens, as well as valid top-level domain), there’s no way to tell whether the domain actually exists. (For example, me@fake.net will validate, though www.fake.net may not be a valid site/domain.)

Resources:

Internet Engineering Task Force (IETF)
Internet Assigned Numbers Authority (IANA)

Interested in getting this EmailValidator class for your own use? Contact me to request a copy.