Scribd
Upload
51 views3 pages

Lab03 PDF

The document provides instructions and exercises for validating form inputs with JavaScript. Exercise 1 describes validating a login form by checking that all fields are filled, the email is valid, and the password has at least 6 characters. Exercise 2 involves adding validation when adding new students to a table and displaying error messages. Exercise 3 describes updating a message in a box based on user text input. Exercise 4 gives requirements for creating a photo slideshow with next, back, and start slideshow buttons.

Uploaded by

AVT Bom21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views3 pages

Lab03 PDF

The document provides instructions and exercises for validating form inputs with JavaScript. Exercise 1 describes validating a login form by checking that all fields are filled, the email is valid, and the password has at least 6 characters. Exercise 2 involves adding validation when adding new students to a table and displaying error messages. Exercise 3 describes updating a message in a box based on user text input. Exercise 4 gives requirements for creating a photo slideshow with next, back, and start slideshow buttons.

Uploaded by

AVT Bom21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Ton Duc Thang University

Faculty of Information Technology

WEB PROGRAMMING AND APPLICATIONS


(503073)
WEEK 3
Prepared by Mai Van Manh

Exercise 1: You are given a login form as bellow:

Your need to write javascript code to validate the form’s information when user click the submit
button. When the submit button is clicked, the following conditions must be checked:
- All fields should be fulfilled.
- A valid email should is entered.
- Password must contain at least 6 characters.

The conditions must be validated in the order listed above. If one of the conditions is failed, you
should stop the validation and display the corresponding error message immediately. Here are
some examples of the error messages:

- “Please enter your email”.


- “Your email is not correct”.
- “Please enter your password”.
- “Your password must contain at least 6 characters”.
When showing the error message, the corresponding text field should be focused and then if the
user click on text field, the error message should be disappeared.

Web Programming and Applications - Week 03 – Page 1


Ton Duc Thang University
Faculty of Information Technology

Exercise 2: Write javascript code to add new student to the end of the table. You should check the
input to avoid the user leaving a field blank. Display an appropriate error message when something
went wrong. If a user click on the delete button, the corresponding student will be removed from
the table.

Exercise 3: You are given a web page. Your task is to write javascript code for the web page
behaves like the image below.

When a user enters a message or changes text color or changes the text style, the text and style of
green alert box will be changed accordingly.
If the user click on “Restore Default” button, all input fields will be restored to their default value.

Web Programming and Applications - Week 03 – Page 2


Ton Duc Thang University
Faculty of Information Technology

Exercise 4: Create a photo slide show site like the one shown below:

Requirements:
- By default, the site will display the first image in the list.
- When a user clicks on the Next or Back button, the corresponding image will be displayed.
- If a user clicks on the Next button when the last image is showing, the first image will be
displayed (and vice versa).
- If the user presses the Start slideshow button, the image will be changed automatically
after 1 second.
- If the web page is in slideshow mode, the Next, Back buttons will be disabled and the
"Start slideshow" button will be changed to "Stop slideshow".
- When the user presses the "Stop slideshow", the state of the buttons is back to the original.

Web Programming and Applications - Week 03 – Page 3

You might also like