Simplified Form Errors

Freshness Warning
This article is over 15 years old. It's possible that the information you read below isn't current.

One of the most frustrating experiences on the Web is filling out forms. When mistakes are made, the user is often left guessing what they need to correct. We’ve taken an approach that shows the user in no uncertain terms what needs to be fixed.



The problem

Most forms require validation — checks to see that required fields have been filled out with the right information. But when a mistake was made, how do you let the user know? The approaches taken by many sites leave much to be desired.

  • Show the error messages on a different screen than the form. The user has to remember what was wrong when they go back to correct the form. Often when they go back, their form information is now missing.
  • Validate one field at a time. The user is told to fix their email address, but when they do, they’re told they also need to include their phone number.
  • List the errors at the top of the form. The user needs to scan the form matching the error with the appropriate fields.
  • Highlight the erroneous fields. The fields are often highlighted by changing the colors. Visitors with vision disabilities, with text browsers, or browsing from non-color devices have trouble figuring out which fields were wrong.
  • Show an icon or symbol next to the offending fields. The user isn’t expecting those icons, so they aren’t looking for them.

Simplified

Here’s how we simplified the error screen.

  • Show all of the errors on the form itself so the user doesn’t have to remember what the errors were in order to correct them.
  • Fill in the information the user has already entered so they don’t need to re-enter it.
  • Show the user a summary of everything that needs to be changed, right at the top of the form. This way, they don’t need to hunt through the form looking for error messages.
  • Show an error icon in the summary of errors and repeat that icon after each field that is filled in wrong. The user immediately associates the icon with the errors and can quickly find them in the form.
  • Surround the field with a colored box and repeat the error message right next to the field. The colored box draws attention to the missing information and the error text explains exactly why that field is highlighted. The user doesn’t need to look back up at the error list to understand why this field is marked.
  • Use three different indicators to show which fields have a problem. By not relying on images or color to show the problem fields, we’re increasing the odds that the messages are accessible to more people.

We’ve provided a demo of the simplified form. Go take a look.

The code

In addition to simply showing the form layout, we’ve also written up an example in PHP. The form validation is simple, but it’s easy to adapt this to your own validation needs or to another programming language like ASP or Perl.


<?php
// Create an empty array to hold the error messages.
$arrErrors = array();
//Only validate if the Submit button was clicked.
if (!empty($_POST['Submit'])) {
    
// Each time there’s an error, add an error message to the error array
    // using the field name as the key.
    
if ($_POST['name']=='')
        
$arrErrors['name'] = 'Please provide your name.';
    if (
$_POST['email']=='')
        
$arrErrors['email'] = 'A valid email address is required.';
    if (
$_POST['phone']=='')
        
$arrErrors['phone'] = 'Please provide your phone number.';
    if (
count($arrErrors) == 0) {
        
// If the error array is empty, there were no errors.
        // Insert form processing here.
    
} else {
        
// The error array had something in it. There was an error.
        // Start adding error text to an error string.
        
$strError = '<div class="formerror"><p><img src="/images/triangle_error.gif" width="16" height="16" hspace="5" alt="">Please check the following and try again:</p><ul>';
        
// Get each error and add it to the error string
        // as a list item.
        
foreach ($arrErrors as $error) {
            
$strError .= "<li>$error</li>";
        }
        
$strError .= '</ul></div>';
    }
}
?>

<style>
label {
  width: 80px;
  text-align: right;
  float: left;
}

.formerror {
  border: 1px solid red;
  background-color : #FFCCCC;
  width: auto;
  padding: 5px 0;
}

.errortext {
  padding-left: 80px;
  font: bold smaller sans-serif;
}
</style>

<?php echo $strError; ?>
<form method="post" action="<?php echo $PHP_SELF; ?>">
<!--
For every form field, we do the following...

Check to see if there’s an error message for this form field. If there is,
add the formerror class to the surrounding paragraph block. The formerror
class contains the highlighted box.

Insert the contents of what the user submitted bak into the form field.

Check again to see if this field has an error message. If it does, show
the error icon and the error message next to the field.
-->
<p<?php if (!empty($arrErrors['name'])) echo ' class="formerror"'; ?>>
    <label for="name">Name:</label>
    <input name="name" type="text" id="name" value="<?php echo $_POST['name'] ?>">
    <?php if (!empty($arrErrors['name'])) echo '<img src="/images/triangle_error.gif" width="16" height="16" hspace="5" alt=""><br /><span class="errortext">'.$arrErrors['name'].'</span>'; ?>
</p>
<p<?php if (!empty($arrErrors['email'])) echo ' class="formerror"'; ?>>
    <label for="email">Email:</label>
    <input name="email" type="text" id="email" value="<?php echo $_POST['email'] ?>">
    <?php if (!empty($arrErrors['email'])) echo '<img src="/images/triangle_error.gif" width="16" height="16" hspace="5" alt=""><br /><span class="errortext">'.$arrErrors['email'].'</span>'; ?>
</p>
<p<?php if (!empty($arrErrors['phone'])) echo ' class="formerror"'; ?>>
    <label for="phone">Phone:</label>
    <input name="phone" type="text" id="phone" value="<?php echo $_POST['phone'] ?>">
    <?php if (!empty($arrErrors['phone'])) echo '<img src="/images/triangle_error.gif" width="16" height="16" hspace="5" alt=""><br /><span class="errortext">'.$arrErrors['phone'].'</span>'; ?>
</p>
<p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>

Adam Kalsey
July 17, 2003 9:59 PM

I think you mean onblur. I've never been a fan of onblur validation. Just because I tab through a field doesn't mean that I have no intention of filling that field out. Validation should happen as a result of a positive action on the part of the user.

Phillip Harrington
July 18, 2003 11:37 AM

Why test for the submit button? This has always pissed me off about PHP developers. if ($submit)... ugh! Just say if (!empty($_POST)) Otherwise, your idea is solid. I have a class that handles the server side stuff (and I'm happy to email it to you for purusal), but your suggestions are spot on for user interface.

Phillip Harrington
July 18, 2003 12:06 PM

The reason to *not* test for the submit button, and specifically to not test for the value of a submit button, is in the case of the one input, one submit button form where the user types in the input and then types their "enter" key. Or a one input, two button form where they click "enter". $submit will be empty. Proof: http://repster.com/dev/empty-submit.php Further more, if you must name your submit button, please don't name it "submit", otherwise you'll go nuts trying to figure out why you can't say this.form.submit(); later in JavaScript. Obviously "Submit" is OK.

Phillip Harrington
July 18, 2003 12:08 PM

But enough ranting, I'm really looking forward to this series of articles!

Adam Kalsey
July 18, 2003 12:51 PM

Phillip, the reason for testing for the submit button is to allow more than one submit button with different actions. For instance, Save and Cancel. Save stores the information in the database and goes back to the main screen, Cancel simply returns to the main screen. Just checking to see if a form was posted can't do that. IE doesn't set the value of the submit button when the enter key is pressed, but Mozilla does. But once again, the intent here isn't to show how to handle forms using PHP. It's to show how to notify the user of errors they made.

Phillip Harrington
July 19, 2003 2:45 PM

You're right - this was not the place for my knee jerk reaction about submit buttons. And again, from a usability persective, these are great suggestions on many levels. I'm just a troglodyte about certain topics. Having said that - can the 2 button form can still be sumbitted with the "enter" key? If so which value is passed?

Phillip Harrington
July 19, 2003 2:50 PM

OK I tinkered more. In Mozilla, if you have a two button form, and only type "enter". The form is submitted, and the first value of multiple submit buttons with the same name is passed as the value for that variable.

Lyle - Croc O' Lyle
July 21, 2003 6:03 PM

Why do the field labels disappear when there's an error? Standards dictate that all form fields should have a label.

Adam Kalsey
July 23, 2003 11:42 AM

I don't see the fields disappear on an error. What browser are you using? Certain versions of Mozilla have a bug that causes text inside the Label element not to be shown at times.

Adam Kalsey
July 24, 2003 4:21 PM

The problem Lyle was having is an apparent CSS bug in IE. Go figure. The float: left on the field label was causing it to disappear. So I'm using a CSS hack to make IE ignore the float on the label and now it works fine.

Richard Soderberg
July 27, 2003 3:20 PM

Looks remarkably similar to the error-handling I implemented at DataBuilt, way back when. We did server-side and client-side both -- should still be up on the web!

Michael Alderete
July 29, 2003 9:00 AM

Thanks for the great example, both visual and the back-end code. Even though a couple people have picked nits with the PHP you included, it's quite valuable to be able to illustrate that it's not a huge task to do your web forms this way, instead of the problem ways you describe at the beginning of the article. The reason why people do forms the problem ways is because it's easier, or it's the first solution that comes to mind. Just showing them the outline of a better way is often enough to change their thinking. (OK, maybe I'm projecting here; it worked for *me*. ;-)

J.Shell
July 31, 2003 7:46 AM

Nice article. I've been using Zope and a product called "Formulator." There are other kits like it out there for other languages/frameworks/servers. Basically - using Formulator (or something like it), you can design a form as smart widgets - instead of just an integer field, it can be an integer field with the range of 0 to 50. I like it because it takes care of both rendering (for most of my forms, I can just use a single loop to draw all of the fields) and validation. Lately, I've been doing only one of the error displays that you've mentioned - displaying them up top, or displaying them next to the field. And I haven't been doing the greatest job at highlighting. I'll start applying both inline and uptop to my code from now on, and do the highlighting. But I highly recommend looking into a Form Helper kit. ASP.NET has the concept built in, it seems. But for other systems - it's very helpful to be able to describe and define a form, its widgets, validation, etc, in the same place - outside of the code that will be responsible for display and validation. My applications have become a lot stronger since moving to such a system (mostly because I'd tend to be lazy/stressed and often punt on manual validation as one of those "I'll get back to it..." things).

Tom Davies
September 10, 2003 6:50 AM

The PEAR library comes with an HTML_QuickForm package that allows for some useful form validation and error displaying. So far I am pretty happy with it. If you are interested check it out at: http://pear.php.net/package/HTML_QuickForm It should get you most of the way there.

Flemming Mahler
November 25, 2003 10:50 PM

Have you been past the Google AdSense login page recently (https://google.com/adsense/)? Try entering an invalid login and see what happens. While it isnt exactly like the suggestion here, it is awfully close :)

These are the last 15 comments. Read all 25 comments here.

This discussion has been closed.

Follow me on Twitter

Best Of

  • Google on the desktop Google picks up Picasa, giving them an important foothold on people's PCs.
  • Rounded corners in CSS There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. This is simpler.
  • Pitching Bloggers Forget what you learned in your PR classes. Start acting like a human instead of a marketer, and the humans behind the blogs will respond.
  • Writing Realistic Job Descriptions Publish a job listing like this one and you are virtually guaranteeing that you won't get qualified applicants for the position.
  • How not to apply for a job Applying for a job isn't that hard, but it does take some minimal effort and common sense.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

15

Recently

Stretching your team (Jun 11)
Stretching your team is one of the best ways to improve your output, your team's happiness, and your velocity. But they'll need coaching.
Physical camera shutter for Cisco Spark Board (Jul 6)
A 3d printable design for a camera shutter for a Cisco Spark Board
My Travel Coffee Setup (Jan 20)
What my travel coffee brewing setup looks like, and how you can build your own for under $100.
Turkey Legs (May 30)
Product naming gone awry.
Speaking for Geeks: Your Slides (Dec 17)
Tips and tricks for creating great slides.
Speaking for Geeks: Writing Your Talk (Dec 14)
Don’t wait until the night before the talk to write it. Crazy, I know.
Speaking for Geeks: Tell a Story (Dec 13)
Telling a story keeps your presentation focused, keeps your audience interested, and makes it easier for you to remember your talk.
Speaking for Geeks: Where to speak (Dec 11)
You've got a great idea for a talk. How do you find conferences to submit it to?

Subscribe to this site's feed.

Elsewhere

Tropo
Voice and communications platforms, including Tropo and Phono. Work.
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2018 Adam Kalsey.
Content management by Movable Type.