CS-90. Assignment 2
Spring 2009

The goal of this assignment is to set up your site for processing a form and for JavaScript to validate the form data before the form is submitted. For this assignment, the JavaScript code will simply call alert() when the form is submitted to show that everything is set up correctly. It will not actually validate the form data in any way.

Download the Core library file, core.js from the course web site and save it in your site’s scripts directory. Add a script link to it in the head of your index page.

Duplicate the template.xhtml file (Control-D), and move the copy to your site’s scripts directory. Then rename it to Login.php. You do not need to change the contents of this file for this assignment, but you may experiment if you want to.

Create a new file named validate_form.js in your scripts (right-click on the directory name, and select New File, then rename the file from untitled.xhtml to validate_form.js).

Add a form to the index page; make the method be "get" and the action be a relative URL to Login.php. Put a fieldset inside the form to avoid validation errors, and add a legend to spiff things up.

Add three input elements (of type "text", "password", and "submit"). Add label elements for the first two inputs.

Test the page in Firefox to be sure you can submit the form. Check the URL of the result to be sure you set up the names and values for passing the form data to the login script correctly.

Set up a JavaScript event listener for the form’s submit events. Do this part in steps:

1. Create an object that contains an init() method. (Functions inside objects are traditionally called “methods;” the difference is not significant.). Have init() display an alert() box when it is called. Pass this object as an argument to Core.start(). Load the web page and verify that init() is called when the page loads.
2. Replace the alert() call in init() with this statement:

   Core.addEventListener(theForm, "submit", submitListener);

   You need to define theForm and submitListener in order to be able to run the code now.

3. Add this line of code to init() before it calls Core.addEventListener():

   var theForm = document.getElementsByTagName('form')[0];

4. Try to figure out how to set up the submitListener() function in such a way that you can reference it from within init() as shown above.
5. Give up and proceed to the next step.
6. Create an anonymous self-executing function that returns the object you created in Step 1; make it the arguement to Core.start(). That is, this function executes and returns the object and it (the object) becomes the value of the parameter passed to Core.Start(), just like defining the object inside the parentheses of Core.start() in Step 1.
7. Define the function submitListener() inside the anonymous self-executing function.
8. Test your code.

When your assignment is working, log out and be sure your profile is copied back to the server. Send me an email message telling me that you have completed the assignment, and I will get a copy of it from your account on Oak for testing. If your roaming profile does not work, mention that in your email, and I will copy your My Website directory from your home directory instead of your profile directory on Oak.

1. Be sure to put your name in your email message!
2. The Subject line must be CS-90.3 Assignment 2 to avoid my spam filters.
3. Send your email to either Christopher.VickeryATqc.cuny.edu or vickeryATbabbage.cs.qc.cuny.edu — but not to both.
4. See the course syllabus for grading and late homework policies.