COMSSE319 Homework 2-HTML & Javascript Solved

35.00 $ 17.50 $

Category:
Click Category Button to View Your Next Assignment | Homework

You'll get a download link with a: . zip solution files instantly, after Payment

Description

Rate this product

1.     Warm Up: Try Some Examples (HTML & Javascript)

  1. First, open canvas, go to Assignments, and then download

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

  1. 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.
  2. 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. [25 points]

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:

  1. Containing the fields as in the table below.
  2. In addition, it should also have a “Continue
  3. 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.

  1. Read http://www.w3schools.com/js/js_validation.asp.
  2. Now, write Javascript code in 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)

  1. Remember to include 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]

  • Create two files html and validation2.js.
  • The TITLE of the html page should be “Contact information“.
  • Create a HTML form in html:
  1. Containing the fields as in the table below.
  2. In addition, it should also have a “Submit
  3. 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 [email protected] 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.

  1. Read http://www.w3schools.com/tags/att_input_pattern.asp. Also, do look at validation example in ExamplesJS folder.
  2. Write Javascript code in js to validate the form as per the rules in the above table when the user clicks Submit button
  3. 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) .

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