Form Validation - on the client side (part 1)

I just thought I'd put up a little overview on form validation. First here is a list of good articles on the subject.

http://developer.apple.com/internet/webcontent/validation.html
http://www.elated.com/articles/form-validation-with-javascript/
http://www.w3schools.com/js/js_form_validation.asp


OK, so here is my summary: whenever you are working with any form that is transmitted over the internet, you want to do some kind of validation of the input before you do anything with it. The point is not just to make sure that the input is correct - like you want to make sure a zip code has only numbers and no letters in it - but because forms are a gateway for malicious attacks on a web server. Secure forms will validate on the client side, usually using Javascript, and also on the server side, in the programming language of choice - after all not every client will have Javascript enabled.

However, for this post we are focusing on client side validation - so this is the checking that should be done before the form submits to the server. So when you are a validating a form you are doing a couple things:

1. making sure required fields are answered
2. making sure input is in a correct format

1. is self explanatory to me but more on 2:


Making Sure Input Is In a Correct Format

First, keep in mind that this should be done on ALL fields - both required and optional fields. As for what this means: you want to make sure that the input adheres to what you are expecting. Keep in mind that sometimes you can help achieve this by just designing for it. For example if you are collecting a date - don't give them a text field, give them 3 drop downs. They can't type "yesterday" if you don't give them something to type into ;)

More examples:
- SSN
- email
- phone number
- zip code
- valid range (i.e. if the answer should be 100-500, or 0 to 100%)

Let's look at SSN. To validate it, you would want to make sure that there are 9 characters, all of which are numeric. If you give the user one text field to enter SSN into, then you might start by stripping the field of all non-numeric characters, including whitespace. You would then test the length of the resulting string to see that it is 9.

This is the end of part 1. In my next post, I'll talk about doing client side validation within a .NET project that is also using the built in .NET validators.

LINK TO PART TWO, CLICK ME :)