Web Development COS10005 – Web Development XXXXXXXXXXLast Updated: 12th October 2020 Page 1 Department of Foundation and Pathways Swinburne University of Technology COS10024 – Web Development...

Web Development
COS10005 – Web Development XXXXXXXXXXLast Updated: 12th October 2020 Page 1
Department of Foundation and Pathways
Swinburne University of Technology

COS10024 – Web Development XXXXXXXXXXWeek 9 - Tutorial Activity 2
Lab 9 – JavaScript DOM

Aims:
• To practice how to create a form data checking/validation function for a HTML form using JavaScript
while maintaining clear separation of HTML, CSS and JS files.
• To review JavaScript functions and control structure
• To gain the skills and knowledge to complete Assignment 2
Task 1: Create Form Validation using JavaScript (2 marks)
Description:
Again, we are going to start with a registration form, and then define and add a client-side form data
validation function using JavaScript. In this lab, we will be using the JavaScript alert function to display
the e
or message. As an extension, you may want to display the e
or message within the web page
instead of using
alert.
Remember to design the form interaction carefully before you start coding, i.e., when and what to do
in response to what event.
Design:
Design starts with discussion and paper drawings. Ensure this process is completed before
implementation.
Step 1: Form (HTML and CSS)
1.1 The design will be adapted from the form presented in Figure 1. For this lab, the e
or messages
will be displayed using the JavaScript alert function, so no CSS solution will be needed. However, if
you do decide to display e
or messages within the web page, you will need to design the
interaction. You are encouraged to investigate and attempt the later approach.
COS10005 – Web Development XXXXXXXXXXLast Updated: 12th October 2020 Page 2
Step 2: (JavaScript)
2.1 Identify which input fields in the form should be evaluated and what rules should apply.
Answer: For this task, we need to evaluate all input fields. The rules are:
(1) All input fields must not be empty;
(2) User ID must contain at one ‘@’ symbol to be a valid email address; (3)
Password and retype password must have the same value; and
(4) Name must be letters and spaces only.
Implementation:
Implementation requires the creation and revision of HTML, CSS and JavaScript files.
Step 3: Directory Set Up
3.1 Create a new folder ‘lab09’ under the unit folder on the mercury server ~/COS10005/www/htdocs.
This is the directory where all files will be uploaded.
Step 4:
4.1 Download lab_09_files.zip from the Canvas. Use the files in the zip file as templates for this lab.
Step 5: HTML Creation
5.1 Using NotePad++ (or SubLime Text for Mac users), open file regform2.html.
Review the HTML and complete the code.
For your convenience, the basic code and additional code is shown below. Make sure you
understand the added code.
!DOCTYPE html>
html lang="en">
head>




(1)link to desktop CSS file______________________
(2)link to JavaScript data validation file_______________