A9: Form Validation

On This Page Overview Specifications Extra Credit Grading Criteria (20) What to Turn In Overview The main points of this assignment are to: Create HTML forms Format numbers Validate form information ^ top Specifications Tutorial Exercises Complete the in-chapter tutorial exercises (step-by-step instructions to complete the case study) that are listed throughout chapter Tutorial 7.1 and 7.2. You must follow the steps exactly and turn in all the files to make them work correctly. This does NOT include the Review Assignment nor any Case Problems at the end of the chapter. Note that you do not need to complete section 7.3 at this time. Form and Form Validation For this project, you will create a single page that demonstrates your knowledge of forms and that uses form validation to verify information. The form you are to design is a faux form that, if it were real, would be submitted as part of the checkout process of an E-commerce site. Name your page form.html and submit the form data to: http://www.edparrish.com/cis132/06f/examples/echo.php Your form must collect the following information: Buyer's first and last name Street address City State Zip code Telephone number Credit card type (use those shown in the tutorial case) Credit card number Credit card expiration with month and year fields In addition, The form must show a subtotal for the order in the amount of $50.00 Also, allow the user to select one of the following shipping options: USPS ($6.75) UPS ($8.50) Federal Express ($10.00) Once the user selects the shipping method, 5% tax should be added to the combined amount for the subtotal and shipping and displayed to the user. Add a submit button and validate the following before the form is submitted: Buyer's first and last name have been entered and are 50 characters or less Street address is 6 characters or more City is 2 characters or more State is 2 characters exactly ZIP code is 0 or 5 digits exactly (no letters or non-digit characters allowed) Credit card is 16 digits exactly (no letters or non-digit characters allowed) Credit card expiration is not blank Shipping method is selected Note you do not need to use JavaScript for validation if your HTML form ensures a correct value. For example, using a selection list for the state would preclude the need to validate the state, assuming that all the selection list option values are exactly two characters. However, your selection list must allow all valid entries (see state abbreviations). Be sure to put your JavaScript code for the form in various functions, and to place at least one function in a file named form.js. Once you complete this page, test your JavaScript to ensure it works without error. Other Specifications Complete a README.txt file following the instructions for homework. Zip your files and submit the zipped archive file to WebCT as explained in the section of this document: What to Turn In. Hints For an example form layout click here. Note that you do NOT need to follow this layout, though you need to include most of the form elements shown. ^ top Extra Credit This extra credit is worth extra credit points: Read ahead and use one or more regular expressions in your form validation. (1 point) Make certain that your README.txt file lists any extra credit attempted. ^ top Grading Criteria The instructor will evaluate your assignment using the following criteria. Each criteria represents a specific achievement of your assignment and has a scoring guide. The scoring guide explains the possible scores you can receive. Some scoring guides have a list of indicators. These indicators are a sign of meeting, or a symptom of not meeting, the specific criterion. Note that a single indicator may not always be reliable or appropriate in a given context. However, as a group, they show the condition of meeting the criterion. For information on grading policies, including interpretation of scores, see the course information page. Tutorial Exercises 8: Demonstrates mastery of the assignment Applies concepts from the lessons appropriately Follows the steps exactly Exercises perform correctly No JavaScript errors encountered during operation 6: Has all the major functionality expected of the assignment Demonstrates many techniques from the lesson May deviate from the specified steps in some way Implementation seems more complicated than necessary. May have one minor JavaScript warning or error 4: Has much of the functionality expected of the assignment Demonstrates some techniques from the lesson Deviates from the specified steps in some way Implementation seems excessively complicated. May have JavaScript warnings or errors Missing support files 2: Serious functional problems but shows some effort and understanding Follows at least 1/2 of the of the specified steps Has a major error (detected by the browser) or many minor errors Implementation seems very convoluted Demonstrates few techniques from the lesson 0: Does not execute or not turned in Form and Form Validation 10: Demonstrates mastery of the form and form validation techniques Has extra features or demonstrates techniques beyond the assignment Applies concepts from the lessons appropriately Meets all specifications (see above) with particularly elegant solutions Runs with no error conditions reported by the browser Generates correct output given correct input Validates the form and verifies all the specified conditions Behaves in a reasonable way in response to incorrect data Validation functions are clearly defined and reusable 8: Has all the functionality expected of the assignment Demonstrates many techniques from the lesson Meets all specifications (see above) Runs with no error conditions reported by the browser Generates correct output given correct input Validates the form and verifies all the specified conditions May have one minor error in the form or validation Implementation seems more complicated than necessary. 6: Has most of the functionality expected of the assignment Demonstrates some techniques from the lesson Meets all but one of the specifications (see above) Runs with no error conditions reported by the browser Validates the form and verifies all the specified conditions Implementation seems excessively complicated. May have 2-3 minor errors in the form or validation 4: Has some of the functionality expected of the assignment Demonstrates some techniques from the lesson Meets at least 1/2 of the specifications (see above) Implementation seems excessively complicated. May have JavaScript warnings or errors in the browser Missing support files 2: Serious functional problems but shows some effort and understanding Meets less than 1/2 of the of the specifications (see above) Has a major error (detected by the browser) or many minor errors Implementation seems very convoluted Demonstrates few techniques from the lesson 0: Does not execute or not turned in REAME.txt File 2: README.txt file submitted with specified information included 1: README.txt submitted but some information was not included 0: No README.txt submitted Maximum Score: 20, plus extra credit ^ top What to Turn In Submit your assignment following the instructions for homework. Create a single zip file with the following: README.txt file All the files needed for the Tutorial Exercises to work correctly Your single web page, named form.html Your JavaScript file, named form.js Any other files needed to support your single html page If you chose to complete the extra credit, then all the files needed for the extra credit to work correctly. You must submit all the files needed for your assignment to work properly. Do not assume that the instructors has any files. Your assignment must work as submitted. ^ top Home | WebCT | Announcements | Schedule | Room Policies | Course Info Help | FAQ's | HowTo's | Links Last Updated: November 19 2006 @20:48:24