Proper form design and validation

With the arrival of “Web 2.0″, proper form validation has become increasingly more important. Rather than just reading websites we are actively helping create them. We’ve become a community who shares information and contributes to our social networks on a daily basis. Sites like Twitter, Facebook and Myspace are entirely user-driven, meaning all of the content comes from the users. How much more important is it then to make doubly sure your forms check the information entered?

Form design

Designers can take steps to minimize form errors prior to validation by designing usable forms. A usable form guides the user through effortlessly both visually and contextually. Most users don’t like to read and they tend to skim through forms very quickly. Keep this in mind when creating your form.

Forms should be easy to digest, easy to scan, and simple enough to allow the user to enter information and quickly proceed to the next field. If you’re like me you use you Tab button to navigate between fields, so make sure your ‘tabindex’ is correct and intuitive on each field. Most of us assume what the next field will be and mentally prepare to enter the requested data ahead of time. It’s bad form (pun intended) to have the Tab key take me to a field that I wasn’t expecting. Forms should be laid out intuitively. Keep the fields linear and put them where users would expect to find them.

Finally, use short, common descriptions for the data being requested and clearly mark required fields. Part of scanability is the ability to quickly see what’s being asked and what’s required. There’s nothing more frustrating than not being able to distinguish required fields from optional fields only to be slowed down and surprised upon submitting.

Form validation

Once the user has entered data and submits the form, it’s necessary to check the data for correctness and cleanliness. Most of the time data are stored in a database for retrieval later. Anytime data are being stored, it’s imperative that it’s kept safe and secure. The likelihood of anyone obtaining access to the database is slim, however code can be entered into forms that can wreck havoc from the outside in. Because if this, it’s important to make sure the data is clean, meaning it doesn’t contain malicious code. In short, you want the data entered to be very specific. We use validation for this reason.

There are two types of validation: client-side and server-side. Client-side validation uses software in the browser such as Javascript to check the data before it’s sent to the server to be processed. Nine times out of ten client-side validation ensures properly formatted data. With it you can make sure phone numbers are formatted properly, email addresses and website URLs are in the proper format, and that no erroneous data was used. Then, once data fits the specified format, it’s sent to the server to be processed.

Once the data gets to the server you can perform server-side validation. This uses code such as ASP or PHP to double-check the code before entering it into a database or sending an email or what have you. While the two methods can be used apart from each other, it’s always smart to use them both together.

Proper form design and validation is incredibly important to get right in a world where the Web is made up of information we create. And since the Web is so personal now, it’s important the information is kept safe and secure.