COMSSE319-Homework 2 Solved

COM S/SE 319 : Construction of User Interfaces

Homework 2

1.       Warm Up: Try Some Examples (HTML & Javascript)
a.       First, open canvas, go to Assignments, and then download

HW2_SampleCode.zip file into your workspace (U:\workspace or something like that!). Then, unzip.

b.      Play with each of the given examples (in the ExamplesJS directory). Open them using a text editor of your choice and modify parts of the html or js files to learn how the different instructions work. If you want to use eclipse instead of notepad or vim or emacs etc., create a new static web project and create new html file and open it with a browser.

c.       Check the code of the example function of validation2.html in the ExampleValidation and see how it works by open validation2.html in web browser.

Note: w3schools.com is a good site to learn about web technologies.

Note that the assignment assumes you have understood these examples.

Note: Please always use relative path in your homeworks and Portfolios

2.       Form Validation
2.1 Create a form in HTML and validate entries of the form using javascript.

2.1.1 Create two files validation1.html and validation1.js.

2.1.2 The TITLE of the validation1.html page should be "Validation Form".

2.1.3 Create a HTML form in validation1.html:

a)      Containing the fields as in the table below.

b)     In addition, it should also have a “Continue” button.

c)      Make it look reasonably good.

Validation rules will be explained in next step.

FIELD LABEL
Field Type
Validation rule
RESULT
First name
TextField
*Required.

Must contain only alphabetic or numeric characters.
 
Last name
TextField
*Required.

Must contain only alphabetic or numeric characters.
 
Gender
Dropdown(male, female)
*Required
 
State
Dropdown(Californi a, Florida, New

York, Texas, Hawaii,

Washington,

Colorado,Virginia,

Iowa, Arizona)
*Required

Select from given list..
 
*Required field = Cannot be Empty.

d)     Read http://www.w3schools.com/js/js_validation.asp.

e)      Now, write Javascript code in validation1.js so that when user clicks “Continue” button it does the following:

●     It validates the entries (as per the table above) and for each entry

if the validation was successful, else it displays

 (These images are included in the lab's zip file as correct.png and wrong.png.) and the notification message about the correct format of input to users (check

ExampleValidation/validation2.html as an example) .

●     Once the validation is successful, it goes to the next page

(validation2.html)

f)       Remember to include validation1.js in the head element of validation.html.

2.2 Create a form in HTML and validate entries of the form using javascript. [20 points]

2.2.1  Create two files validation2.html and validation2.js.

2.2.2  The TITLE of the validation2.html page should be "Contact information".

2.2.3  Create a HTML form in validation2.html:

a)      Containing the fields as in the table below.

b)     In addition, it should also have a “Submit” button.

c)      Make it look reasonably good.

Validation rules will be explained in next step.

FIELD LABEL
Field Type
Validation rule
RESULT
Email
TextField
*Required.

Must be in the form xxx@xxx.xxx x should be

alphanumeric (e.g. no special symbols).
 
Phone
TextField
*Required.

Must be in the form xxx-xxx-xxxx or xxxxxxxxxx. x should be numeric
 
Address
TextField
*Required

Must be in the form of city & state. example: Ames,IA
 
*Required field = Cannot be Empty.

d)     Read http://www.w3schools.com/tags/att_input_pattern.asp. Also, do look at validation example in ExamplesJS folder.

e)      Write Javascript code in validation2.js to validate the form as per the rules in the above table when the user clicks Submit button

f)        Your code should displayif the validation was successful, or if

there was an error, displayand the notification message about the

correct format of input to users (check

ExampleValidation/validation2.html as an example) .

g)      Remember to include validation2.js in the head section of validation2.html.