The main use of the application is to validate a HTML5 FORM Elements using JAVASCRIPT . Here we can check each
field whether it is in given format or not. At the top of the form there is a progress bar which increments on
successful completion of each form element. After successful completion of all form elements the form displays a
success message on the top of the form.
Account Information <Legend>
Username* <Text Box> [Length - Min: 5 chars: Max: 8 chars; Type: Alphanumeric]
Password* <Text Box> [Decoded; Length - Max: 6 chars; Type: Alphanumeric]
Profile Information <Legend>
First Name* <Text Box> [Length - Min: 2 chars: Max: 6 chars]
Last Name* <Text Box> [Length - Min: 2 chars: Max: 15 chars]
Profile Pic* <File Upload> [Type: jpg/gif/png]
Gender* <Radio Buttons> [Male/Female; Default: Male]
Date of Birth* <Select Boxes> [Day/Month/Year]
Hobbies* <Check Boxes> [Painting/Singing/Traveling/Dancing/Gardening/Others]
Have been to* <Multiple Select box> [Countries List]
Contact Information <Legend>
Phone * <Text Box> [Format: + 91 (990)-824-7888]
[Submit button]
index.html :- This consists of the form details such as the elements (Textbox , radio button, combobox ,etc ) we
used in the form and what way we have taken.
css.css :- This had been existed in the css folder which is an external style sheet that has been linked in the
html for applying styles to the elements in the html file.
validate.js :- This had been existed in the js folder of the application that is linked through the html file.
This consists of the validation functions that have been applied to the form elements.
images :- This folder consists of the images that we have applied for the elements of the form.
screenshot :- This is the screen shot of the main form.