CS2513: Client-Side Programming
CSP06: Chapter 6 - Enhance and Validate Forms

Objective:

• Enhance form usability with JavaScript
• Customize browser- based HTML validation
• Implement custom validation to check for errors and display error messages

Points

• Full Credit: 40 Points
• Late/Resubmit Credit: 36 Points

Situation

Assignments will consist of two parts: Hands-on Projects and an ongoing individual case project.
The Hands On Projects will from the end of each chapter. Although it is recommended that students complete all of the projects only a limited number will be submitted for grading.

In addition, students will create a comprehensive web site that will be enhanced and modified throughout the class. Please take this very seriously not only for the purposes of this assignment/class but also for possible inclusion in your web work portfolio. This week the emphasis will be on creation of the site including styles. navigation, and documentation. All pages must be adequately documented and validate. Be sure to read and adhere to the Class Coding Standards

Specifications

Hands-on Projects

Required Projects

• Hands-on Project 6-3
  Project 6-1 [p. 437] will need to be completed in order to do Project 6-3 [p. 443] but only the URL for 6-3 will be submitted for grading. Project 6-2 is not required and Project 6-3 can be done WITHOUT completing Project 6-2.

  Notes for Project 6-1:

  The code uses the type="number" with the maxlength attribute. Maxlength does not work with "number" type http://www.w3.org/TR/html-markup/input.number.html. If the type is changed to text then maxlength would work
  ... BUT.....
  novalidate is added to the form tag which means the HTML validation will be turned off allowing for the more customized JavaScript validation
  ....BUT....
  the maxlength property will be used in Project 6-3 when the cursor is moved to the next box after the maximum number of values has been reached
  ...MY CONCLUSION....
  leave the maxlength in the code but change the type to text rather than number
  

  In Project 6-1 there is no validation for the length of the entry. In looking at lines 10-20 on p. 440 notice the validation is only to determine if the value is a number and does not check for the number of characters. Additional code would be required for that. This will somewhat be handled in Project 6-3 by automatically advancing the cursor, but the zip code still not be limited to a maximum number of digits. The additional code is not required for this assignment, just be aware of this limitation. In the "real" world, validating the number of digits entered into each textbox would be a requirement for true validation.
  

• Hands-on Project 6-5 (p. 447)

Project 6-4 [p. 444] will need to be completed in order to do project 6-5 but only the URL for 6-5will be submitted for grading.

Notes for Project 6-4

The placeholder portion of this assignment is not required. Therefore Step 9 lines 1-32 on p. 446 do NOT need to be added to the code. Also on p. 447 Step 10 the following line generatePlaceholder();
will not be added. (In the video it was added but it is not required for this assignment.)

Notes for Project 6-5

p. 449, Step 7 after line 15 (before the close } for the if statement add the following code: alert("Items are correct. Form is being submitted"); As is the form just reloads with no visual cue that the validation has been passed. In the "real" world a confirmation page would appear but at this point a simple alert is being substituted.

Follow the instructions in the text and as outlined in the General Instructions in the Chapter 1 Assignment. The data files which accompany the text will be required for these assignments. They can be downloaded from http://academic.cengage.com/resource_uploads/downloads/1305078446_432240.zip . Within the downloaded files there will be a folder for each project.

Need a Visual Reference?
The following are videos are of all of the Hands-on projects for this chapter, not just the ones required for this assignment. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. Please note that the hands-on projects must validate for HTML5 and CSS3.

JavaScript(6e) Hands-on Projects: Chapter 06

Website Project

Overview

Throughout the chapter a web form is being enhanced and validated. This form with some modifications will be incorporated into your website project.

Need a Visual Reference?
The following video displays the basic functionality of the assignment and not the entire web page. Each student's site will be tailored to meet their talents and style. The following is just the most basic. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. All pages and items must validate for HTML5 and CSS3.
JavaScript(6e) Personal Website: Chapter 06-Forms

Specifics

• Make a copy of the JSChapter05 and rename it JSChapter06. This week's work will be done using the files in this folder.
• As was true last week this part will be a little tricky, but hopefully you will remember some of the process from last week.
• As you were reading the chapter, you should have downloaded the data files for Chapter 6. In that folder, there is a subfolder named Chapter. Copy the files from the Chapter folder into your website. This would include snoot.css, results.htm, and snoot.htm. (Note: snoot.js will be/was created as you work through the chapter. Depending on how you are working through this it may or may not exist at this point. Eventually however, it must be included in your website.) There are no images this week. modernizr.custom.65897.js should already be in your website. If not, copy that also.
• Make a copy of DOM.html and name it forms.htm/l. Replace the contents of the main area with the contents from snoot.htm. Also add the code to link snoot.css and snoot.js
• In the new forms.htm/l change the meta tags as appropriate.
• So basically, the contents and required links from snoot.htm have been incorporated into forms.htm/l.
• In CSP.js,
  • Update the top and bottom navigation such that the generic name of CH 06 is replaced by Forms and the corresponding links will link to the new page, forms.htm/l.
  • At the top of the code (just below the initial comments) add a comment something similar to
    /* ~~~~~~~~~~~ Chapter 6: Enhancing and Validating Forms- Order Form~~~~~~~~~~~~ */
    // The JavaScript code is located in snoot.js
    Note: In reality these code should be incorporated into csp.js but there is already enough going on that we will just leave the code in separate files to make it easier to follow the text instructions.
  • If you have not already, work through the chapter's example. Add comments as needed so that I will know that you understand what is being done and not just typing from the text.
  • The form page must validate for CSS3 and HTML5. However, no modifications need to be made to the results page. It can be used as is.
  • Once the chapter project has been completed and working, the following modification MUST be made

  Form Elements

  • Change all of the <input> fields with a type of "number" to the type of "text"

  TabIndex and AccessKeys

  • Add tabindex to all form fields. Accesskeys will be a bit trickier since there are more than 26 items (alphabet has 26 characters). Also a number of fields should logically use the same letter as another field. There is some debate about accesskeys. An interesting read might be http://webaim.org/techniques/keyboard/accesskey
    • In the message area, change the wording from Custom Message to Custom Note
    • Use the following for access keys... not every field will have an accesskey. At times the accesskey will move the user to the grouping, not an individual field.
    • Message
      • Custom Note - N
    • Billing
      • First Name = F
      • Last Name - L
      • Street Address - A
      • City - C
      • State -S
      • Zip - Z
      • Phone (first text box only) - P
    • Delivery
      
      • Check box "for same as billing" - B
    • Deliver Date
      • Month - M
      • Day = D
      • Year - Y
    • Payment
      • Visa - V
    • Create Account?
      • Username - U
    • Place Order - O

  Phone Number - Automatically Move the Cursor

  • For the two phone numbers (billing and delivery) modify it so instead of one text box, there are three,
    • The three boxes must be displayed inline and not block
    • FYI: In a phone number such as 405 555-1212, 405 is the area code, 555 is the exchange, and 1212 is the individual number.
    • Use the following values for the maxlength and size attributes
      • area code and the exchange - maxlength is 3 and size is 3
      • individual number will have a maxlength of 4 and a size of 4.
    • Add code to the snoot.js file such that when the user enters three values into the area code field, the cursor automatically moves to the exchange field. Then when the user enters three values in the exchange field, the cursor will move to the individual number field.
    • This will require the addition of event Listeners and other code. This week's class sample code should help with this.

  Validation

  • There is an issue with using the required attribute on selection structures which causes it to not validate. One solution is to add a size attribute which sets the number of items to be displayed. Displaying all 50 states in the drop-down is not a good option.
    
    The other option is to have the first element's value attribute be set to a null string AKA be blank.
    (Example: <option value="">Select a State</option>).
    This is the option we will use for all of the selection items. Add a new item as a first option to all of the select lists changing the wording to appropriate text. This option will now have an index of 0. The previous first item in the list (example AL for Alabama) will now have an index of 1. The code will need to be modified so this value is displayed when the web form loads AND the error trapping must be changed so that this cannot be a valid selection for the user. (Hint: -1 may no longer be the appropriate "error-trapping" value SelectedIndex. - maybe 0? maybe 1?) Making this modification will be an indicator that you have a good understanding of the code.

  

  Correct Logic Error for Create Account

  As mentioned in this week's course content, there is a logic error which causes the form not to submit when the user correctly enters the data to create an account.(p. 426) If one of the three fields has an entry, the validation will correctly indicate that the other two fields must have valid entries. The form will not be submitted. If the passwords do not match, an error will be thrown and the form will not be submitted. Again, this is correct. The issue is when all three fields have been completed and passwords match. The form still will NOT submit. The result is the form can never be submitted if the person also wants to create an account. This would not be a good business practice. Review the code and modify so the form submits when valid data has been entered.

  Finalize

  Whew, that was a bit of work! Upload to the server and make sure everything operates and validates as it should.

  
  

Recurring Specifications

• Web pages must validate for HTML5 and CSS3 must validate. If errors are generated the entire assignment will not be graded.
• Hands On Projects
  • Pages must validate for CSS3 and HTML5
  • Comments in the HTML code must be updated to include the student name and date
  • Additional comments, meta tags, and documentation are not required.
  • Students are not required to move in-line JavaScript code to a separate .js file in the Hands-on Projects.
• Personal Website
  • All pages in the site must contain the same header, footer, and navigation.
    
  • All pages in the site must be formatted with CSS so they are consistent with other pages in the site and professional in appearance.
  • All formatting must be done using an external style sheet.
  • The function/s are to be located in a .js file which is linked to the web page. No in-line JavaScript is allowed.
  • Required and appropriate documentation and comments must be included for all HTML, CSS, and JS files
  • Tables may NOT be used unless otherwise stated.
  • Meta tags, date last modified, and OCCC disclaimer, as described in Class Programming Standards must be included.
  • The navigation bar for all pages in the site must be updated to include working links for all of the pages that have been created thus far.

Assignment Submission

• Upload all three folders (two [2] for the hands-on projects and one [1] for JSChapter##) to your apollo1 account.
  Note: ## is to be replaced by the two digit chapter number - Example: 01, 02, 11, 12.
• View the web pages in Chrome, Firefox and, if possible, Safari and Internet Explorer
• Re-validate (HTML5 and CSS3) and double check to make sure all items are visible from all computers. (Reminder: When grading, the Validation tool in Chrome and/or FireFox's Web Developer Tool Bar is used. All pages MUST validate using this method.
  
• Submit the URLs for all three items in the LMS.
• Submission links must open web page in a new window (not inside of the LMS) and display the page.
• Assignments not meeting the previous requirements (opening in a new window and HTML5/CSS3 Validation) cannot be graded.
  If it is still within the late/resubmit period, the assignments can be resubmitted (10% penalty). If it is after the final deadline, the work can no longer be submitted which could result in a zero for the assignment.