• Skip to main content
• Accessibility features

• Contact Ed Gellenbeck

• CWU
• Gellenbeck
• CS 350

Site Search

Search ~350

Lab 7: JavaScript Form Validation

Student Learning Objectives

• Design and implement an interactive client-side JavaScript calculator as an XHTML form that
  • Accepts user input
    • At a minimum, there must be some way for the user to enter their number of hours they worked this week and their hourly pay rate
  • Calculate the amount they made for the week and displays it to the user
    • Do not forget that U.S. labor laws require any hours worked over 40 per week to be paid as time-and-a-half
    • Include error checking in case your users try to fool you with bogus input
    • Display the calculated amount as currency $dd.cc
  • Mark-up your form using fieldset, legend, labels, titles, and accesskeys for accessibility
• Use the W3C XHTML and CSS Validation Service to eliminate any validation warnings and errors
• Use comments, meta tags, and Tidy within HTML-Kit to create JavaScript, Web, and CSS pages that conforms to the CS 350 Coding Standards

Assignment

• Create a new folder U:\Lab7. Folder Lab7 will contain three files: your index.html file, your lab7.css style sheet file, and your lab7.js JavaScript file.
• Use an XHTML form to obtain the input values from the user
• Place the JavaScript functions to error check and calculate the weekly paycheck in lab7.js
  • Note: call your JavaScript function with the onsubmit event
    <form id="payform" action="#" onsubmit="javascript:return calculatePayCheck();">
  • Simply display error messages and the paycheck amount in an alert box. You should not use server-side script to calculate the error messages or paycheck amount
• Use the lab7.css linked style sheet to apply formatting to the web page that displays the paycheck calculator to the user as shown below
  • Make the form 27 em wide
  • Display the fieldset border and legend color as Maroon
  • Display the "* required" text in Red
  • Study the snapshot below to duplicate the style rules

To Receive Credit

• Print out and staple together four printouts:
  • your input form as displayed in a browser
  • your lab7.js JavaScript functions
  • your lab7.css style sheet
  • your index.html XHTML 1.0 strict code
• Save your files as index.html, lab7.css, and lab7.js in folder U:\Lab7 in your cs350 account.

Grading Criteria

• Labs will be graded on a scale of 0 to 10:
  • 10: Excellent: no problems detected in the code and the form's input display format is well done and accessible. Error checking of user input is done and the calculated amount is displayed as currency
  • 9: Very well done: input values are error-checked and the correct pay calculated (given correct input), but one or two minor problems detected
  • 8: Well done: one or two problems with error checking or calculated amount
  • 7: Acceptable: three or four problems with error checking or calculated amount
  • 6: Problems: four or more problems remain
  • 5, 4, 3: Incomplete: the lab was attempted but over one-third of the requirements still undone
  • 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score

Screen Snapshot