Description
Objective: The objective of this exercise is to:
1. Continue working with JavaScript
2. Learn and implement form validation using HTML5 and JavaScript
Submit: screenshots, your html files and a link to your web pages
You may discuss this with your fellow students or the instructor.
Part #1: Validation Tutorial
Estimated time: 30 minutes
Exercise: review slides
• 16-23 – HTML5 validation
• 35-36 JavaScript validation
Part #2: Validation using HTML5 Only
Estimated time: 30 minutes
Exercise:
• All work will be done in ~/public_html/cse383/lab8
• Create a file call called index1.html
• Create a web form (no action and target must be a blank page)
• Fields (make sure all fields have valid type, id and name)
o Name (text: at least 2 characters)
o Uid (text: one word only)
o MobilDevices (number: values from 1-10 (not a dropdown))
o quoteCite (text: must contain only a-zA-Z0-9 and . , – ‘ ” / : (in other
words a URL))
• Submit button
o If anything is incorrect – it should stop and let the user know
Part #3: Validation using JavaScript (no HTML5)
Estimated time: 15 minutes
Exercise:
• All work will be done in ~/public_html/cse383/lab8
• Create a file call called index2.html
• Create a web form (no action and target must be a blank page)
CSE383 Lab #8 JavaScript Validation
Page 2 of 2
• Fields (make sure all fields have valid type, id and name)
o Name (text: two words)
§ Verify that the text field has a valid name (firstname lastname)
§ two names (a-zA-Z) with a single space in between
§ if invalid, display a message after the text field is entered, or when
the form is submitted.
• Submit button
o If anything is incorrect – it should stop and let the user know
SUBMIT:
• Screenshot
o Index1.html (HTML5 validation) (showing it stopping something with the
error message displayed)
o Index2.html (javascript validation) (showing it stopping something with the
error message display)
• File
o Attach index1.html
o Attach index2.html
• Link
o Add the link to the web pages in the text area
