Enhance the prototype created in Assignment 1 with jQuery validation - Assignment 2

Assignment 2

Due Date:

Softcopy: 1st March, 2020, Sunday, at 11:59PM.

Hardcopy and Demo: The first day your class takes place after the softcopy is due. Check the course Calendar in eConestoga under Content->Course Information->Schedule Summary.


Enhance the prototype created in Assignment 1 with jQuery validation. This version will be used in the next assignments.

Before you begin:

·         You must complete Assignment 1 before proceeding.

·         You must know how to search and use the online jQuery Mobile Docs to enhance your mobile app.

·         Make yourself familiarize with the hands on examples done in the lab during class time.

·         Make sure the view the screenshots in color, as you will be required to match the color themes used exactly.

·         The assignment specification and screenshots are made assuming a student’s name Jason Bourne (and initial is JB). Replace Jason Bourne with your full name, JB with your own initial. Also replace xx with your own initials.

·         Make sure to fulfill all programming and assignment standards. The Standards Summary is available at eConestoga.

·         All id and name attributes must have your initial (e.g., jb for Jason Bourne) as prefix.

·         All javascript file and function name must have your initial as prefix.

·         See AvengersDB-iteration2 hands on program in details.

Problem Specification:

Task 1: Create Assignment 2 project

·         Create an empty project and name it: XXFeedbackA2 (where XX is your initials).

·         Copy all the files and folders from your assignment 1 project except .idea folder (If Webstorm is used to create your Assignment 1. If you use any other IDE, .idea folder will not be created).

·         Add the following Javascript files under js folder:

o   xxdatabase.js

o   xxfeedbackDAL.js

o   xxfacade.js

o   xxutil.js

o   xxglobal.js

·         Add the following Stylesheet file under css folder:

o   xxmystyle.css

·         Include all of them to index.html

·         Add ready event to xxglobal.js file. All the event handlers must be defined in xxglobal.js file.


Task 2: Modify ‘Home’ page

·         Update the headers to indicate Assignment 2 (Change all A1 to A2). See the screenshot below. Rest of the home page will be the same as your assignment 1.



Task 3: Modify ‘Add Feedback’ page

·         Update the page by according to the following screenshot.

·         Add a Type combobox containing Other, Asian, Canadian. “Other” will be shown by default.

·         If ‘Do you want to add your ratings’ checkbox is checked then 3 rating textbox  (Food Quality, Service, Value (Hint: input type=”number”)) and Overall Rating (Calculated (Hint: input type=”text”)) will be visible. Otherwise they will be hidden.

·         When the page will be shown, ‘Do you want to add your ratings’ checkbox will be unchecked by default.

·         Overall Rating textbox is readonly/disabled.

·         Any change in the 3 rating text boxes will automatically update the overall Rating (calculated) textbox (Show average will follow the formula:

o   (Quality + service + value) * 100/15 .

o   Add a % symbol

·         The 3 rating textboxes will be initialized with 0.

·         Implement the show/hide feature in xxglobal.js file. Hint: put the 4 texboxes in a div, show and hide the div if the check box is checked/unchecked, respectively. See jQuery built in function show(), hide() (https://www.w3schools.com/jquery/jquery_hide_show.asp)



Task 4: Update ‘Modify Feedback’ Page

·         Update the ‘Modify Feedback’ page in the same way as ‘Add Feedback’ page.

·         ‘Do you want to add your ratings’ checkbox will behave in the same way. Check the following screenshot(s).




Task 5: Implement validation

·         Include jQuery validation Javascript (available in eConestoga->Content->Resources->_lib.zip) in the index.html file

·         Define your validation logic in xxutil.js file

·         Add the following styles to xxmystyle.css file:


    color: #F00;

    font-weight: bold;





textarea.error {

    border: 1px red solid;



·         Both ‘Add a Feedback’ and ‘Modify Feedback’ pages will have similar validation (defined in xxutil.js file). Hint: You need to implement a validation function for each form.

·         The validation will get triggered when Save button (for Add Feedback page) and Update button (for Modify Feedback page) is clicked.:

o   Business Name: required and length must be 2-20 characters long

o   Reviewer Email: required and valid email address

§  Any valid email will be sufficient.

§  Making only conestoga email valid will result in deduction of marks.

o   Reviewer Date: required

o   If ‘Do you want to add your ratings?’ checkbox is checked

o   Food Quality, Service and Value: value must be 0-5

§  Note: don’t use min and max attributes for the ratings in the html file, rather define your own rules and messages for them in xxutil.js file.

·         Check the following screenshot:



Task 6: Update Settings page

·         ‘Save Defaults’ button will save the ‘Default reviewer Email’ to local storage and show a message through alert.

·         Use your own Conestoga email address as initial email when the page is shown.

·         Check the following screenshots:




Hints: check LocalStorage.zip file available under Assignments module. See the script block to find out how to use localstorage

Task 7: Test your app

·         Use Chrome browser and provide screenshots of the following

o   Home Page

o   Add a Feedback page with checkbox unchecked

o   Add a Feedback page with checkbox checked and with validation checked

o   Modify Feedback page with checkbox unchecked

o   Modify Feedback page with checkbox checked and validation checked

o   Settings page with alert (as shown above)

o   Developers tool containing Local Storage information (just like the screenshot above)

·         Save your screenshots to xxA2Screenshots.doc file.

Task 8: Upload app

·         Make a zip file xxAssignment2.zip that will contain

o   Complete project for your app

o   xxA2Screenshot.doc file.

o   After unzipping, the application must run without any modification.

·         Login to eConestoga and upload to the dropbox: Assignment 2.

·         For late submission: marks will be deducted as specified in the coversheet.

Task 9: Demo your app

·         Demo your app on specified demo date. Please check the calendar available under “Course information”.

·         Bring your hard copy during the demo containing:

o   Assignment coversheet and marking sheet

o   Printout of HTML File

o   Printout of xxglobal.js and xxutil.js

o   Printout of xxA2Screenshot.doc containing all screenshots

o   Assignment 2 marking sheet (The last page of this document)

·         You must demo your project within 1 week of due date. Otherwise you will not get the marks allocated for demo. 

·         If you choose not to demo at all, you may drop the hardcopy of your assignment at WMB-4G26. However, if you don’t submit the hardcopy, marks will not be uploaded.

Marking Sheet




Marks Allocated

Marks Achieved


Home Page designed as specified




Add a Feedback page is designed as specified




Add a Feedback page ratings show/hide




Add a Feedback page validation (in Save button’s click handler)




Modify Feedback page is designed as specified




Modify Feedback page ratings show/hide




Modify Feedback page validation (in Update button’s click handler)




Settings page stores info to local storage




7 screenshots




Overall ratings is updated automatically whenever any of the quality, service, value changes in add and modify pages.





Assignment Standard (proper project name, this marking sheet, etc., see the standard documents for detail)

5 x ________



Prefix missing for id and name attributes

2 x ________



id attribute is missing for any input control

3 x ________




name attribute is missing for any input control

3 x ________




JavaScript file and function name not prefixed

2 x ________




Programming Standard

1 x ________





3-10 based on severity









No Demo










Answer Preview
This is only a preview of the solution. Please use the purchase button to see the entire solution