Form Validation

Where do you handle form validation?

1. The most foolproof place is checking it server side after submission. The form delivers the data to a form handler written in a server-side language such as asp or php. If anything is missing or malformed, the script displays an error and sends the user back to the form. Ick, not the friendliest method. But always works, because the code runs in a controlled server environment instead of relying on the client having a compatible device/browser with Javascript enabled.

2. The most popular method has been Javascript validation on form submission. The user fills out the form, clicks the submit button, then a Javascript routine validates and passes on to the handler, OR displays an error and returns them to the first field in the form that failed. If multiple fields weren’t filled in correctly, this process repeats until it passes. If the user left multiple required fields blank, didn’t get the date or phone number in the right format, didn’t enter a properly-formed email address, etc., this could mean a lot of back and forth (even though it is much quicker than the server-side method 1).

3. I vote for “on the fly” validation. The user enters a field, it optionally displays a hint (in cases like “use date format mm/dd/yyyy”), and as soon as they tab out of that field it goes to the next OR if an error was detected it immediately displays a note telling them what is required so they deal with it while they are still thinking about what that field wanted. I don’t mean a Javascript popup window that requires them to acknowledge either, I mean a clean message displays by that field until they fix it.

4. This is probably going too far in most types of form fields, but the next level is AJAX style validation as they type. You’ve probably seen this when setting up a new account password, where they require a minimum length and special characters recommended. You start typing, the note says “invalid” in red until you enter the minimum characters, then it switches to “weak” in yellow, then you add a special character and it changes to “strong” in green. You know you are good before you leave the field.

A few links for reference:

Leave a Reply

Your email address will not be published. Required fields are marked *