Department of Foundation and Pathways Swinburne University of Technology
COS10024 – Web Development Week 10 - Tutorial Activity 2
Lab 10 – jQuery
Task 1: Create Form Validation using jQuery library (2 Marks)
Description: This lab is to demonstrate the use of 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.
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.
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.
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