There's an art, in my opinion, to validating the information that a user submits in a web form. There are many ways to do it, but few forms do so in a way that is clear for the user and gives them fast feedback, before they submit.
The first thing you should do is use form field labels, descriptive text, and colors to give the user instructions and feedback before they even enter any information. The second is to give them instant feedback via JavaScript when they click on the form's submit button-- before they upload any data. Finally, if the user's entries pass your JavaScript validation and are sent up to the server, you should perform full validation there and, if needed, send their form back to them with clear instructions on how to correct any errors they made. I'll explain each of these steps in detail.
Using labels, descriptive text, and colors for clear user-input instruction
Everyone is familiar with the practice of indicating required fields, and it should be considered a must-have in every form. The most common practice is to tell the user at the top of the form that "required fields are indicated with an asterix" and then (obviously) putting asterixes after the labels for required fields. If all fields are required, don't bother with the asterixes, but make sure to tell the user at the top of the form that "all fields are required."
I like to put descriptive text in smaller, lighter type underneath the field label. Descriptive text is copy that helps the user know what the field is for, what they should enter into it, and how you might use the information. Think "Passwords must be at least 6 characters" or "Make sure that you enter a valid email address". You should also use descriptive text to clear up any doubts or problems that will occur to most users for that field, such as "We respect your privacy and will not share your email address with anyone else for any reason".
Finally, you can use CSS to apply colors to the form fields that haven't been changed yet. For instance, using attribute selectors you can make empty text fields grey or red, giving users the ability to tell at a glance which fields they have yet to type in or which they may have skipped over.
Pre-submission feedback with JavaScript validation
It's a great a convenience to your users if you can tell them of any problems with the information they've entered before they submit your form. It saves them the trouble and time of waiting through the form upload and subsequent download of a page just to tell them that they'll have to correct something and submit all over again. You should make sure that email addresses are valid, that all required fields are filled, and that dropdowns have valid selections. You should also validate against any other business logic you need to so as to save the user time and frustration. Your goal should really be to use JavaScript to guarantee that the user only has to submit once.
Server-side validation and clear feedback to the user
No matter how complete your JavaScript validation may be, you should also fully validate the user's submission on the server-- after all, some users may have JavaScript turned off, and there are some validation tests (such as those involving database lookups) which can only be performed server-side. If you do find issues that need correction, make sure to record each error so that you can list it out right at the top of the form that you return to the user. Nothing is as annoying to a user as being told that they've made errors and will need to resubmit without being told what the errors are. Tell them exactly, right at the top of the form, and highlight the field labels of the fields that need their attention. Also, make sure to keep the form populated exactly as they submitted it. Losing the data your users entered so that they have to retype it is not acceptable.
Post a comment