Project #3: Validating Forms using JavaScript

Due Date: Tuesday, May 11th, 1999

For this assignment, you will write an HTML form, and a JavaScript to validate it before it is sent.

First of all, before I forget, let me point out that it doesn't really matter what the action of the form is. If you just want to get some kind of feedback that says "Yeah, it submitted", you can use

ACTION="http://www.genome.wi.mit.edu/cgi-bin/echo.pl" method="GET"

Use a different script for the action, if you like, but NOT one in which mail is sent to anyone other than yourself. Especially your TA or instructor.

I recommend starting from the example in the book, which I've mirrored here.

• In HTML form
• The source code

The form should have:

• A multiple-select with at least 5 items
• Text-input fields for:
  • Name
  • Phone number
  • Street Address
  • City
  • State
  • Zip code
• A submit button

Here are the formats you must validate for the fields:

• Of the multiple-select, exactly two should be checked. Make this clear in the form.
• The name, street address, and city fields should be non-empty.
• The phone number field should take the exact format
  (123)456-7890
• The state field must be one of the 51 two-letter postal abbreviations of the United States. If you are unfamiliar with these abbreviations, you can see them here in states.txt. Even if you are familiar with them, you may still want to look at states.txt.
• The zip code must be exactly five numbers.

For the phone number, state, and zip fields, validate them as soon as they are changed. If they are invalid, alert the user, and select the field for their convenience.

For the other inputs, validate them when the submit button is pressed. If they are invalid, alert the user, and select the field for their convenience. If more than one of the inputs is invalid, it is okay to complain about only one when the submit button is pressed.

You should explain exactly what the problem is in the alert; the necessary formats should also be made clear to the user on your form.

If the submit button is pressed and everything is okay, put up an alert thanking the user by name.

Questions and answers

The code given in the book already does most of this. Are we allowed to use it? Isn't this too easy?

Yes, you may use it. Don't forget to give credit to the original author.

Note also that my validation requirements are stricter than the ones used in the original code. So you will have to rework the code fairly extensively. You will not get credit for turning in functions that only do the same validation as the original functions, in the cases where the requirements have changed.

You said "The name, street address, and city fields should be non-empty." Does this mean you want some default value in the fields?

No, it means that when it comes time to validate those fields, all we require is that they not be empty. If they contain any text, consider that acceptable.

When you say "Of the multiple-select, exactly two should be checked. Make this clear in the form."... what do you mean, make this clear? Do I need a "clear" button to reset the selection?

Oops. No, I mean, make it clear to the user that exactly two choices must be selected. In other words, make sure it says so right there with the SELECT. Also, if the user does not do this, make sure that the alert explains exactly what the problem is.

Can't I just make a menu for the states?

No. Please write code that takes the user's two-character input and checks it against the list of valid inputs (states). If it doesn't make sense to you to do this with an array, you can write 51 if statements, or however else you like.

I think that's it. As always, contact me at wyvern@cs.umbc.edu with any questions, and check the page for revisions, which will be clearly marked.

Steve