Lab Exercise 2 CMPUT 410 (Fall 2004) Due Date: Week 4 before the end of your lab time. Objectives: Use javascript to validate input on HTML forms. Comments: Your TA has to see that the exercise is done. Javascript can capture events and act upon those events. The event triggered by the submission of a form can be captured by Javascript and the input can be validated before the data is submitted to the server. Reproduce the HTML code to render the simple HTML form as in Figure 1. Notice the allignment of the input fields and the frame arround the form. This form comprises some fields that are optional and others that are mandatory. Mandatory fields are marked with an asterisk. All fields are text fields except the Province field, which is a drop-down menu with all provinces in Canada. Write the necessary Javascript code that captures the data before it is sent at form submission time, and validates the input. If any of the mandatory fields are missing, the code should pop-up a message indicating that the field needs to be entered. The incorrect field should get the focus. In the case of the Postal code, the input should be validated to be of length 6 starting with a letter and alternating between a letter and a digit. The E-mail, if entered, should be of the form someone@somewhere.suffix, where someone and somewhere are strings that may contain ".". The form need not be sent to any CGI or servlet. As an action, you could e-mail the data to yourself. Figure 1 Figure 2 Figure 3 Additional (not part of the exercise): Once you put your pages on-line, validate them by the W3C validator (http://validator.w3.org/). Experiment with other input fields such as radio-buttons and checklists. See how javascript can control those fields.

End of Page