V

ofPrathyaksha
Wollongong
CSCI110University
INDIVIDUAL
PROJECT 2

A JavaScript project which the creation of a form with Vp001@mymail.sim.edu.sg

both field validation and
batch validation.

JavaScript

Table of Contents
1.

Layout of Web Page.............................................................................................. 2

2.

Codes used........................................................................................................... 3

3.

4.

2.1.

Codes used in HTML....................................................................................... 3

2.2.

Codes used in CSS......................................................................................... 3

2.3.

Codes used in JavaScript................................................................................3

Validation............................................................................................................. 4
3.1.

A part of the JavaScript code (Field Validation)..............................................4

3.2.

A part of the JavaScript code (Batch Validation)............................................5

Other codes.......................................................................................................... 6
4.1.

A part of the HTML code................................................................................ 6

4.2.

A part of the JavaScript for the Type of Magazine..........................................6

4.3.

A part of the HTML code for the end of the form...........................................7

4.4.

A part of the CSS code for website layout......................................................8

4.5.

A part of the CSS code for the form layout....................................................8

Table of Figure

Figure
Figure
Figure
Figure
Figure
Figure
Figure
Figure

1:
2:
3:
4:
5:
6:
7:
8:

Magazine for webpage..........................................................................2

Field Validation...................................................................................... 4
Batch Validation..................................................................................... 5
HTML code (a glimpse)..........................................................................6
JavaScript for type of magazine..........................................................6
Codes at the end of the form...............................................................7
CSS layout codes (a glimpse)...............................................................8
CSS codes for form................................................................................8

1. Layout of Web Page

Figure 1: Magazine for webpage

2. Codes used
2.1.

Codes used in HTML

Class floating box

<fieldset>
Onkeyup
Onblur
<option>
Onkeypress
Required

2.2.

Codes used in CSS

Padding
Margin
div.container
Nav, nav ul, nav ul a
.floating-box
Overflow
Border, background, background-color
Float, clear, width etc.

2.3.

To align logo image

For every section such as name and
address
For making the user input letters
automatic capital
For linking the input to the JavaScript
function for validation
For choosing state and which payment
For linking to contact number field
function
To make sure certain fields do not
remain empty

For list of magazine type

For selecting under list of magazine
type
For overall webpage layout
For overall webpage layout
To align the image logo
For the article layout
For the designing of the webpage
Minor details for better website
adjustments

Codes used in JavaScript

getElementById
addEventListener
querySelector
Array.from
.toggle
.contains
isNaN
Ifelse
Focus()
Nested ifelse

Used in the functions which have

automatic capital letters
Magazine sub-selection script
Magazine sub-selection script
Magazine sub-selection script
Magazine sub-selection script
Magazine sub-selection script
Used when user does not enter
anything in the compulsory fields
For most functions
To link user input to its respective
functions for validation
For batch validation

3. Validation
3.1.

A part of the JavaScript code (Field Validation)

Figure 2: Field Validation

3.2. A part of the JavaScript code (Batch Validation)

Figure 3: Batch Validation

4. Other codes
4.1. A part of the HTML code

Figure 4: HTML code (a glimpse)

4.2. A part of the JavaScript for the Type of Magazine

Figure 5: JavaScript for type of magazine

4.3. A part of the HTML code for the end of the form

Figure 6: Codes at the end of the form

4.4. A part of the CSS code for website layout

Figure 7: CSS layout codes (a glimpse)

4.5. A part of the CSS code for the form layout

Figure 8: CSS codes for form

4.6. Comfirmation before submission

Figure 9: Codes for confirming before submitting the form

5. Conclusion
This project shows the various content and syntax needed to create a form for
users. In this case, the form is for a registering for a magazine. To ensure that the
user enters all the information correctly, two levels of validation are used, field
validation and batch validation.
Some things to take note:
It will not let you go to the next field unless the correct information is entered
in the previous one.
There will be an alert, asking the user if they would like to submit the form or
not, giving them the option of backing out from the registration.
Instead of one final confirm, it is asked twice, to make sure the user is 100%
sure.
Only the second address line is not compulsory.
Only one magazine topic can be chosen for one registration. User has to sign
up again for another one.