\n"); } else { header("Content-type: text/html; charset=utf-8"); } ?> CS-90.3 Assignment 5

CS-90.3 Assignment 5

Summary

This assignment continues where we left off at the end of Assignment 4: it is the first step of two in which you are to use JavaScript to help users fill out a form and to prevent submission of a form with invalid data. In this step, you are to set up an event listener for a form’s submit event, and to verify that the user has entered a value for one of the form’s input elements.

The Assignment

  1. Add a form to the index page for your site.

    Without changing your code for Assignment 4, just add a form element between the h1 element and the first paragraph. Use the get method, and set the action attribute to a nonexistent web page: scripts/process_form.php. (You will not actually create that file until two assignments from now.)

    Add the following elements to your form:

    <form action="http://scripts/process_form.php/" method="get"> <fieldset> <label for="email">Email:</label> <input type="text" id="email" name="email" /> <span id="email-status">Missing</span> <label for="password">Password:</label> <input type="password" id="password" name="password" /> <span id="password-strength">Missing</span> <button type="submit">Submit</button> </fieldset> </form>

    Based on the XHTML given above, edit the stylesheet for your web page so the form looks like this:

    Screenshot of formatted form
  2. Add a submit listener to the form.

    Keeping the script file for Assignment 4 in place, add another script file, named assignment_05.js, to your web page. Using the standard technique for this course, set up the code for this assignment in this new script file. The anonymous self-executing function should have a local variable named email and an inner function named submitListener(). Code the init() function so that it initializes the email variable with a reference to the DOM object corresponding to the input element with the email id. (Note that being able to understand and even to write sentences like the previous one is a key objective of this assignment.)

    Also code init() function to register the submitListener() function as a listener for submit events generated from the form.

    In submitListener() use console.log() to display the value property of the email object. Then use Core.preventDefault() to prevent the form data from actually being sent to the (nonexistent) form_processor.php file.

  3. Test your web page.

    Use Firebug to verify that your code displays whatever you type into the email input element when you submit the form, and that the form does not actually get submitted.

    Be sure the W3C validators give no warnings or errors when you click the XHTML and CSS links at the bottom of your page.

    Be sure your web page still does everything required for Assignment 4.

Submit The Assignment

When you have tested your web site and verified that everything validates and runs correctly, log out so your site will be copied back to the server. Then send me an email to let me know your assignment is ready for grading: I will copy your site from the lab server to babbage to verify that it is correct.

Send your email to vickeryatbabbage.cs.qc.cuny.edu with CS-90.3 Assignment 5, spelled and capitalized just like that. Be sure to put your email address inside the message you send.