Due Thursday, May 8
50 Points
This assignment gives you a chance to work with forms.
Since you will be writing separate programs for each part described below, each requiring its own XHTML page and CSS, start by writing a simple XHTML page which will eventually provide links to each program’s XHTML page. Make it clear from each link’s label and/or context to which program it leads. Eventually, when the assignment is complete, publish this page (along with all the files comprising your solutions) to the wcit server and add a link to it to your home page.
The book presents a custom slider control that slides horizontally. Your task for this part of the assignment is to reorient this slider control so that it runs vertically, with the text field above the slider. Use the modified image files slider_scale_vert.jpg and slider_thumb_vert.gif to build your reoriented slider.
As with previous assignments, the changes you need to make are not extensive, but this is some of the most intricate code you have seen this semester. The more time you spend ensuring that you fully understand the code (XHTML, CSS and JavaScript) and how it works together, the less time you will likely spend modifying it. If you do not proceed with caution, you will clickly make a useless mess of the code. If this happens, you will likely find the best solution is to start over with a fresh copy of the book’s code.
When you are comfortable enough in your understanding of the code, I’d suggest that you start by modifying the XHTML and/or CSS to get things rearranged vertically. Then, proceed to working on the JavaScript to make it respond properly to the user’s actions. When you’re done, the slider should provide all the same functionality as the original, while sliding vertically rather than horizontally.
Form validation is one of the most common applications of JavaScript on the Web, and regular expressions are an important part of the form validation process. For this part of the assignment, you’re going to gain more experience with both by extending the capabilities of the book’s form validation object.
Start by adding another property named alphaphone to the rules and
errors properties. This rule should validate all
phone numbers, including those that are represented alphabetically
(with some or all of the digits replaced by their corresponding uppercase
and/or lowercase letters on the keypad). Of course, it should continue
to allow standard numeric phone numbers consisting entirely of digits.
Make sure you compose an appropriate error message.
Add another property named zip to the rules and errors properties.
This rule should validate US Zip codes with an optional Zip+4 code. A
standard Zip code consists of exactly 5 digits. When the optional Zip+4
code is added, a Zip code consists of exactly 5 digits followed by
a hyphen and then 4 more digits.
It’s fairly common to need to validate credit card numbers entered
into forms, but that cannot be accomplished using regular expressions.
Instead, you will need to modify the submitListener() method
to do invoke a method when it validates a field in the creditcard class.
An algorithm, called the LUHN formula, can be used to determine
if a credit card number is valid. You’ll need to research
the LUHN formula at http://www.beachnet.com/~hstiles/cardtype.html.
When you understand the algorithm, implement it as a separate method
of your FormValidation object, and use that method to complete the
validation of any fields in the creditcard class. For security
purposes, I
would strongly recommend that you not use
actual credit card numbers for testing this
method. Instead, test it using the following bogus
numbers: 49927398716, 5915-1215-9038-5073, 347 687
212 876-43 and 5821 3424 9861 4318. The first two should
validate (in fact, the first one comes from the example
in the Web site listed above) and the second two should
not. Do not worry about validating the credit card number against the
prefix and length information provided in the table
at the Web site listed above. This can be accomplished
easily enough using regular expressions, but it will
complicate the testing process.
Create a web page containing a form that can be used to test all the capabilities of the FormValidation object (both those from the book and those you’ve created yourself). Make it clear from the context of each control in the form exactly which capability it is meant to test.
