[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1858
  • Last Modified:

php form validation: highlight incorrect fields

I'm making a basic user registration for a mailing list form for a website i'm working on. I've made the form and implemented basic error checking functionality, however i want this to be amended. At the moment when an error occurs, through a user failing to complete a field, it is added to an array of errors called errorList, when this has any content these errrors are echoed bqack to the user. It would be preferable however if any errors on behalf of the user mirror back the form they have submitted with correct values retained and incorrect form fields highlighted by adding a red outline to the input boxes and the label for the input box to also be highlighed. When these inputs are checked, rather than just checking if they are completed i would like to perform checks related to the particular inputs, e.g. checking if the email address is of a valid construct, and checking if the postcode (UK equivalent to ZIP code) is valid and contains only letters and numbers.

I'm using css to style my site and i know that the best way to add color to the error input boxes would be by adding an error class, i just dont know how i would implement this.

I'm using a functions page for my site as a template for the design, this is called functions.php and is called at the top of the script, pagetop() and pagebottom() are the functions that display the top and bottom half of the page. db.php is used to call my database connection to my mysql database where the correct data will be inputted.

This is what i've got so far:

<?php
require 'functions.php';
include 'db.php';

$pagename = "SUBSCRIBE";

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$house_number = $_POST['house_number'];
$street = $_POST['street'];
$town = $_POST['town'];
$postcode = $_POST['postcode'];
$county = $_POST['county'];
$submit = $_POST['submit'];

pagetop($pagename);

if (!$submit)
            {
            echo '
            If you are interested in further details please complete this form</a>
            ';
            
            ?>
            <br><br>
            <form method="post" action="<? echo $PHP_SELF; ?>">
            <table width="75%" cellpadding="4">
                  <tr>
                        <td>Name:</td>
                        <td><input type="text" name="name" id="name"></td>
                  </tr>
                  <tr>
                        <td>Email:</td>
                        <td><input type="text" name="email" id="email"></td>
                  </tr>
                  <tr>
                        <td>Telephone Number:</td>
                        <td><input type="text" name="phone" id="phone"></td>
                  </tr>
                  <tr>
                        <td>House Name/Number:</td>
                        <td><input type="text" name="house_number" id="house_number"></td>
                  </tr>
                  <tr>
                        <td>Street:</td>
                        <td><input type="text" name="street" id="street"></td>
                  </tr>
                  <tr>
                        <td>Town:</td>
                        <td><input type="text" name="town" id="town"></td>
                  </tr>
                  <tr>
                        <td>Postocde:</td>
                        <td><input type="text" name="postcode" id="postcode"></td>
                  </tr>
                  <tr>
                        <td>County:</td>
                        <td><input type="text" name="county" id="county"></td>
                  </tr>
                  <tr>
                        <td>&nbsp;</td>
                        <td><input type="Submit" name="submit" value="Add"></td>
                  </tr>
            </table>
            </form>
            <?
            }
            else
            {
                  // set up error list array
                  $errorList = array();
                  $count = 0;
                  
                  // validate text input fields
                  if (!$name) {
                                    $errorList[$count] = "Invalid entry: Name"; $count++;
                                    }
                  
                  if (!$email) {
                                          $errorList[$count] = "Invalid entry: Email"; $count++;
                                          }
                  
                  if (!$phone)
                                          {
                                          $errorList[$count] = "Invalid entry: phone"; $count++;
                                          }
                                          
                  if (!$house_number)
                                          {
                                          $errorList[$count] = "Invalid entry: House Number"; $count++;
                                          }
                                          
                  if (!$street)
                                          {
                                          $errorList[$count] = "Invalid entry: Street"; $count++;
                                          }
                                          
                  if (!$town)
                                          {
                                          $errorList[$count] = "Invalid entry: Town"; $count++;
                                          }
                                          
                                          
                  if (!$postcode)
                                          {
                                          $errorList[$count] = "Invalid entry: postcode"; $count++;
                                          }
                  
                  if (!$county)
                                          {
                                          $errorList[$count] = "Invalid entry: county"; $count++;
                                          }
                                          
                                          // check for errors
                  // if none found...
                  if (sizeof($errorList) == 0)
                  {
                        // generate and execute query
                        $query = "INSERT INTO subscription(name, email, phone, house_number, street, town, postcode, county) VALUES('$name', '$email', '$phone', '$house_number', '$street', '$town', '$postcode', '$county' )";
                        $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());
            
                        // print result
                        echo "<font size=-1>Insert Successful. <a href=index.php>Go back to the main menu</a>.</font>";
            
                  }
                  else
                  {
                        // errors found
                        // print as list
                        echo "<font size=-1>The following errors were encountered: <br>";
                        echo "<ul>";
                        for ($x=0; $x<sizeof($errorList); $x++)
                        {
                              echo "<li>$errorList[$x]";
                        }
                        echo "</ul></font>";
                        echo '<a href="javascript:history.back()">Return to subscription page</a>';
                  }
            }

?>
<?

pagebottom()

?>

Thanks a lot.
0
robjmills
Asked:
robjmills
1 Solution
 
shmertCommented:
Try this, assign each <tr> a class with the name of the field, making this class name the same as the input name.  Also, have your inputs echo the value from the previous form data, if it is available.  Example:

               <tr class="postcode">
                    <td class="label">Postocde:</td>
                    <td><input type="text" name="postcode" value="<?php echo @htmlspecialchars($_REQUEST['postcode']); ?>"></td>
               </tr>
               <tr class="county">
                    <td class="label">County:</td>
                    <td><input type="text" name="county" value="<?php echo @htmlspecialchars($_REQUEST['county']); ?>"></td>
               </tr>

Then in your form validation code, iterate through the required fields and echo a CSS rule for any missing items.  This code should go before the form gets generated.

<?php
$requiredFields = array('postcode','country');
$invalidFields = array();
foreach($requiredFields AS $field) {
    if (empty($_REQUEST[$field])) $invalidFields[] = $field;
}

if ($invalidFields) {
    echo '<style type="text/css">';
    foreach($invalidFields AS $field) {
        echo "tr.$field td.label { color: red; }\n";
        echo "tr.$field td input { border: 1px solid red; }\n";
    }
    echo '</style>';
} else {
    // no invalid fields means the form was successful
    header("Location: done.php");
}
?>
0
 
robjmillsAuthor Commented:
There doesnt seem to be any other error checking carried out with this code, that is a real priority, to make sure that the entries are valid.
i'm real busy at the moment with other parts of this site, would it be possible for someone to adapt my code with the changes i want, theres 329 points in it for you.
0
 
scully00000Commented:
robjmills

Will have a look at this in the morning and make suggestions, if somebody else hasn't fixed it for you by then. One thing though - postcodes are a nightmare (trust me, I've tried), so will look at some other way.

Cheers
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
red010knightCommented:
You should look into validating the form with javascript first. This way, you never leave the page if there are recognizeable errors in the code. And The code doesn't look very complex for errors you would need to check for. But the code for such is rather involving as I'm not a fan of form validation scripts cause I tend to go SERIOUSLY overboard with the checks to the point that getting improper data is almost impossible as I look at string length, Special charachters, abbreviations, proper seperation (ie 1234567890 is actually 123-456-7890 and so forth. There are numerous scripts out there that can validate different parts of the form and I will try to list a few for you before I goto bed. But you would have the form action be something like:
<input type="button" onclick="javascript:validateThisForm()"> or something similar.

Here is a tutorial for how to set it up:
http://developer.apple.com/internet/javascript/validation.html
A set of sample code for dressing it up:
http://www.aaronsw.com/weblog/000559

This does the basics for email:
http://www.javascripter.net/faq/validati.htm
This link may help securing the address and phone fields (I don't have time to see how effective they are)
http://www.vtfb.org/vfbmember/overview.htm

Well these should give you the syntax you need and some good ideas behind what would need to be done to prevent false data from being entered into your forms.

Good Luck and sorry I don't have the time to help you further with it. But Javascript and PHP are a VERY nice combination of languages - so if you don't already know how to use it and work with it, I suggest you learn as it makes web dev ten times easier - IMHO.

Red010Knight
0
 
Mark_KendallCommented:
Ok, this is how I do it.........

First you will need this bit of code in the head section of the page (assume you will need it within the the function 'pagetop($pagename)'
so may need to add errors to the fuction via global or as arg eg. pagetop($pagename, $errorList)) :

<?php
      // Generate error styles
      if($errorList) {
            echo "
      <style>";
            foreach($errorList as $_err['k'] => $_err['v']) {
                  echo "
            #{$_err['k']}      { border: 2px solid #FF0000 }";
            }
            echo "
      </style>\n";
      }
?>

This create the styles for the error fields...


<?php
      require 'functions.php';
      include 'db.php';

      $pagename = "SUBSCRIBE";

      $name = $_POST['name'];
      $email = $_POST['email'];
      $phone = $_POST['phone'];
      $house_number = $_POST['house_number'];
      $street = $_POST['street'];
      $town = $_POST['town'];
      $postcode = $_POST['postcode'];
      $county = $_POST['county'];
      $submit = $_POST['submit'];

      pagetop($pagename);

      if (!$submit)
                    {
                    echo '
                    If you are interested in further details please complete this form</a>
                    ';

                    ?>
                    <br><br>
                    <form method="post" action="<? echo $PHP_SELF; ?>">
                    <table width="75%" cellpadding="4">
                           <tr>
                                    <td>Name:</td>
                                    <td><input type="text" name="name" id="name"></td>
                           </tr>
                           <tr>
                                    <td>Email:</td>
                                    <td><input type="text" name="email" id="email"></td>
                           </tr>
                           <tr>
                                    <td>Telephone Number:</td>
                                    <td><input type="text" name="phone" id="phone"></td>
                           </tr>
                           <tr>
                                    <td>House Name/Number:</td>
                                    <td><input type="text" name="house_number" id="house_number"></td>
                           </tr>
                           <tr>
                                    <td>Street:</td>
                                    <td><input type="text" name="street" id="street"></td>
                           </tr>
                           <tr>
                                    <td>Town:</td>
                                    <td><input type="text" name="town" id="town"></td>
                           </tr>
                           <tr>
                                    <td>Postocde:</td>
                                    <td><input type="text" name="postcode" id="postcode"></td>
                           </tr>
                           <tr>
                                    <td>County:</td>
                                    <td><input type="text" name="county" id="county"></td>
                           </tr>
                           <tr>
                                    <td>&nbsp;</td>
                                    <td><input type="Submit" name="submit" value="Add"></td>
                           </tr>
                    </table>
                    </form>
                    <?
                    }
                    else
                    {
                           // set up error list array
                           $errorList = array();
                           $count = 0;

                           // validate text input fields
                           if (!$name) {
                                                  $errorList['name'] = "Invalid entry: Name";
                                                  }

                           if (!$email) {
                                                         $errorList['email'] = "Invalid entry: Email";
                                                         }

                           if (!$phone)
                                                         {
                                                         $errorList['phone'] = "Invalid entry: phone";
                                                         }

                           if (!$house_number)
                                                         {
                                                         $errorList['house_number'] = "Invalid entry: House Number";
                                                         }

                           if (!$street)
                                                         {
                                                         $errorList['street'] = "Invalid entry: Street";
                                                         }

                           if (!$town)
                                                         {
                                                         $errorList['town'] = "Invalid entry: Town";
                                                         }


                           if (!$postcode)
                                                         {
                                                         $errorList['postcode'] = "Invalid entry: postcode";
                                                         }

                           if (!$county)
                                                         {
                                                         $errorList['county'] = "Invalid entry: county";
                                                         }

                                                         // check for errors
                           // if none found...
                           if (sizeof($errorList) == 0)
                           {
                                    // generate and execute query
                                    $query = "INSERT INTO subscription(name, email, phone, house_number, street, town, postcode, county) VALUES('$name', '$email', '$phone', '$house_number', '$street', '$town', '$postcode', '$county' )";
                                    $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

                                    // print result
                                    echo "<font size=-1>Insert Successful. <a href=index.php>Go back to the main menu</a>.</font>";

                           }
                           else
                           {
                                    // errors found
                                    // print as list
                                    echo "<font size=-1>The following errors were encountered: <br>";
                                    echo "<ul>";
                                    foreach($errorList as $error)
                                    {
                                           echo "<li>$error</li>";
                                    }
                                    echo "</ul>The fields with the errors are bordered in red.</font>";
                                    echo '<a href="javascript:history.back()">Return to subscription page</a>';
                           }
                    }

?>
<?

pagebottom()

?>
0
 
Mark_KendallCommented:
Much like shmert has done :)
0
 
seengeeCommented:
i'd recommend checking out vdaemon software, especially if you use dreamweaver. Its only about 10 bucks and it allows for all that you need, including regular expressions to check data integrity and css controlled errors, check it out at : www.x-code.com/vdaemon
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now