Solved

php form validation: highlight incorrect fields

Posted on 2003-10-30
7
1,713 Views
Last Modified: 2007-12-19
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
Comment
Question by:robjmills
7 Comments
 
LVL 11

Expert Comment

by:shmert
ID: 9652353
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
 
LVL 1

Author Comment

by:robjmills
ID: 9652484
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
 
LVL 2

Expert Comment

by:scully00000
ID: 9653751
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 3

Expert Comment

by:red010knight
ID: 9655562
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
 
LVL 2

Expert Comment

by:Mark_Kendall
ID: 9656486
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
 
LVL 2

Expert Comment

by:Mark_Kendall
ID: 9656491
Much like shmert has done :)
0
 
LVL 1

Accepted Solution

by:
seengee earned 329 total points
ID: 9700638
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now