Department of Foundation and Pathways Swinburne University of Technology
COS10024 – Web Development Week 10 - Tutorial Activity 2
Lab 10 – jQuery
Aims
• To practice how to use a JavaScript framework such as jQuery to enhance user interaction.
• To review JavaScript functions and control structure.
Task 1: Create Form Validation using jQuery library (2 Marks)
Description: This lab is to demonstrate the use of jQuery.
Part 1: Based on a registration form, implement the JavaScript functions for client-side form data validation using jQuery.
Part 2: Create a section collapse effect for the Account Information and User Information sections of the registration form.
Part 3: Modify the validation function to use an HTML+CSS pop window (similar to Lab 8).
A simple preview of the web page to implement in this lab is presented in Figure 2 on page 6.
Note: A gif file named objective.gif that presents what to achieve in this lab can be found in lab_10_files.zip which is available on Canvas.
Design:
The design process starts with discussion and paper drawings. Ensure this process is completed before implementation.
Step 1: Form Creation and Presentation (HTML and CSS)
The design presented in Figure 1 will be used.
1.1 Add a “[-]” symbol beside each input section for the user to click to collapse the section. Once a section is collapsed, it should display [+] to expand the input section.
Step 2: JavaScript Implementation
2.1 Identify which what form data should be evaluated and what rules should apply.
Answer: We need to evaluate all input fields. The rules are:
Rule 1: All input fields must not be empty;
Rule 2: User ID must be a valid email address. Thus, it must contain a ‘@’ symbol; Rule 3: Password and Retype Password must have the same value; and Rule 4: Name must be letters and spaces only.
Implementation
Implementation requires the creation of HTML, CSS and JavaScript files. In this lab, we will use the HTML and CSS files created in Lab 8. Those files are available in lab_10_files.zip on Canvas.
Step 3: Directory Set Up
3.1 Create a new folder ‘lab10’ under the unit folder on the mercury server ~/COS10005/www/htdocs. This is the directory where all files will be uploaded.
Step 4: HTML Creation
4.1 Using NotePad++ (or SubLime Text for Mac users), open file regform2.html.
4.2 Review the HTML code and locate comments #1 - #6 and add missing HTML code as required. For your convenience, the basic code and additional code is shown below:
Step 5: CSS Creation
5.1 Open files regform2_desktop.css and modal.css. Review the CSS code, no changes will be made to these files in this lab.
Step 6: Form Data Validation Using jQuery
6.1 Open file validation.js, convert the existing code to use jQuery as shown below. Note: Replace ‘struck out’ code with the red code shown below