Lab 7: JavaScript
Point 50
start Feb 20
due Feb 27, 11pm
Objectives: You will be creating some javascript inside your contact.htm page to perform form validation. You will also be generating a pop-up window once the comment form submit button is hit to tell the user thank you for their comments. This will give you some experience on two of the main reasons that javascript is used --- form validation and dynamic client-side interactions.
Resources: Check out a class and book materials on javascript with some real code examples that will help a lot with this lab.
Definition of Problem:
|
You are to edit the
html Contact Us (contact.htm) form you created in Lab 5. You must validate every field --for nave that there is a minimum number of characters (say 3) and for the email field that has a minimum of 5 characters containing an @ and . symbol (grewe@yahoo.com). For the comments text area it must contain some minimum number of characters. If it fails on any one of these elements, you should notify user and highlight the problem area. YOU SHOULD not actually submit the form to formbuddy.com for cgi processing until ALL fields in the form validate. |
Once the user has entered in valid information and the results gone to formbuddy.com you should then also pop-upn an alert window telling the user thank you for their comments. |
PUT ALL Of your javascript code as functions in a separate file called FormProcessing.js and include this file into your HTML as an external javascript code file. You ofcourse will have some javascript eventhandling code inside the contact.htm HTML page which calls the appropriate funcitons in the FormProcessing.js file
Deliverables
- Upload you updated contact.htm page, and the new FormProcessing.js page to your your server account under your public_html directory Make sure all the files and directories have file mode (permissions) of 755.
- Test out your site by typing in the url (http://puzzle.sci.csueastbay.edu/~YOURLOGIN) ---this should go to your index.htm page --- Test it in IE and Firefox and Chrome browsers --- test your new contact us page.
- Turn in the following information
- URL to website (e.g http://puzzle.sci.csueastbay.edu/~YOURLOGIN/index.htm)
- upload to blackboard both the contact.htm and FormProcessing.js (yes it in your account but, I also want them as attached files to blackboard)