COM271—Task 11

JavaScript for Simple Form Validation
Given 3/9 | Due 3/11

Syllabus | Assignments | References and Useful Links
←Task 10 | Task 12→

Overview: Write javascript code to check form input against pre-determined validity criteria, reporting any errors through a single alert box.

Preparation: Readings from week 8 (Javascript functions, form validation) and 9 (regular expressions).

Form Feedback via Alert Box Error Messages

Load the form from the previous task and save as "11_simple_validation.shtml". Add this new page to your navigation file with the link "simple validation."

Proceed as follows:

  1. Update the banner and title element with "Simple Javascript Form Validation". Add a link to this page from your navigation ssi file.
  2. For each input box on the form, perform the following validation checks:
    • Personal Information
      • First Name (not empty)
      • Last Name (one or more letters, upper or lower case)
      • Gender (male or female) (one button checked)
    • Contact Information
      • Street Number (one or more numbers)
      • Street Name (one or more letters, numbers, spaces, hyphens, commas, or periods)
      • City (one or more letters, upper or lower case)
      • State (one option selected)
      • Zip code (5 numbers at the beginning of string)
      • Telephone (3 numbers, 3 numbers, 4 numbers in 3 boxes)
    • Suggestion (one or more letters, upper or lower case)
  • See notes on Javascript Form Validation and study scripts under the section "A 'Good' Validator: One Alert Box listing all errors at once." You will be building a primary function which calls additional functions to check for each type of error (see Validation Library, I & II, from week 8 notes). The scripts will work together to build a string of text listing errors. The primary function will then report out this string via a javascript alert box.
  • Build the validator function one line at a time. For each addition of a call to a test function, build the call and the test function and test before moving on. Your goal here is to study and understand the functions and to not only make them work, but to also understand how they work.
  • Your finished form validator should be tested by going through all boxes. Note that testing for not empty, numbers, letters, and 5 numbers will require up to four functions, some of which will be reused. Checking for the radio buttons and select will require two additional functions. Keep these functions simple (e.g., test for 5 numbers for zip code; don't worry about zip code extensions, etc.
  • Your finished page should look something like the illustration, above, producing an alert box listing all errors, as shown.
  • Save your scripts (if you built them on your page, this means everything between the <script>...</script> tags) in a new folder, "/scripts," in a file, "scripts/validator.js". Link to them from within your page,
    <script src="scripts/validator.js" type="text/javascript" ></script>
    (i.e., there will be no other scripts left on your page).
  • Well done! You're a programmer!