Comments

Comments for Simplified Form Errors

Excerpt: 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. Read the whole article…

BillSaysThis
July 17, 2003 10:42 AM

Error (typo) alert: "When we simply something, we show it off here." Simply is meant, I expect, I to be simplify. LOL

BillSaysThis
July 17, 2003 10:47 AM

Also, how about a separate RSS feed for this? The first article is excellent.

Adam Rice
July 17, 2003 1:09 PM

Hmm, no reality-checking on the e-mail address or phone number. I realize that is somewhat outside the scope of this post.

Adam Kalsey
July 17, 2003 3:10 PM

Bill... Typo fixed, thanks. That's what happens when you launch at 2am. There is an RSS feed, but it's being held in an undisclosed location... I'm acutally trying to decide what content to include in the feed. Since articles will be posted pretty randomly, I don't want someone grabbing a full-text feed every 15 minutes. It might be weeks between articles, so that would simply waste bandwidth. So for now, feel free to subscribe to http://kalsey.com/simplified/rss.xml but be aware that the contents of the feed will proably change. Adam... That's right, the purpose of this isn't to show robust form validation. The validator only actually checks to see if there's anything (even a space) in the fields. A real form validator would check the formats of email addresses and phone numbers to see if they are real. What I hope that people get out of this is that they can create user friendly form validation without hassle. The techniques that I'd expect people to use are what you can see in the screenshot, not what you see in the PHP. The only reason for including the PHP at all was so that you can see how simple the backend actually is.

BillSaysThis
July 17, 2003 5:00 PM

Thanks, Adam. The only reason I would want the RSS is to know that a new article is posted, since longterm I don't know that you want to keep mentioning them in the main blog. So just an excerpt in the RSS is more than fine, and I will set SharpReader to only check once per day.

Marcus
July 17, 2003 7:00 PM

Great article! How about an example that uses JavaScript to display the error icons OnChange().

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 :)

This discussion has been closed.

Follow me on Twitter

Best Of

  • Lock-in is bad T-Mobile thinks they'll get new Hotspot customers with exclusive content and locked-in devices.
  • The importance of being good Starbucks is pulling CD burning stations from their stores. That says something interesting about their brand.
  • Comment Spam Manifesto Spammers are hereby put on notice. Your comments are not welcome. If the purpose behind your comment is to advertise yourself, your Web site, or a product that you are affiliated with, that comment is spam and will not be tolerated. We will hit you where it hurts by attacking your source of income.
  • Where do the RSS ad startups fit in? Yahoo's RSS advertising service could spell trouble for pure-play RSS advertising services unless they adapt their business model.
  • Simplified Form Errors 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.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Dysfunctions of output-oriented software teams (Sep 17)
Whatever you call it, the symptom is that you're measuring your progress by how much you build and deliver instead of measuring success by the amount of customer value you create.
Evaluative and generative product development (Aug 30)
Customers never even talk to the companies that don't fit their needs at all. If the only product ideas you're considering are those that meet the needs of your current customers, then you're only going to find new customers that look exactly like your current customers.
Product Manager Career Ladder (Aug 19)
What are the steps along the product management career path?
Building the Customer-Informed Product (Aug 15)
Strong products aren't composed of a list of features dictated by customers. They are guided by strong visions, and the execution of that vision is the primary focus of product development.
Assumptions and project planning (Feb 18)
When your assumptions change, it's reasonable that your project plans and needs change as well. But too many managers are afraid to go back and re-work a plan that they've already agreed to.
Feature voting is harmful to your product (Feb 7)
There's a lot of problems with using feature voting to drive your product.
Encouraging 1:1s from other managers in your organization (Jan 4)
If you’re managing other managers, encourage them to hold their own 1:1s. It’s such an important tool for managing and leading that everyone needs to be holding them.
One on One Meetings - a collection of posts about 1:1s (Jan 2)
A collection of all my writing on 1:1s

Subscribe to this site's feed.

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

Twitter, etc: akalsey

Resume

PGP Key

©1999-2019 Adam Kalsey.