Use widgets in a form

In this exercise, youll modify a Reservation application so it uses Tabs, Datepicker, and Dialog widgets.

1. Open the HTML and JavaScript files in the initial folder. Now, run this application to see what the user interface looks like.

2. Modify the HTML so the contents of the three fieldset elements can be implemented as three tabs of a Tabs widget. When you do that, you can delete the fieldset and legend elements, and you can set the headings for the tabs to the content of the legend elements.

3. Add the jQuery code that implements the tabs.

4. Add the jQuery code that implements the Datepicker widget for the arrival date. The date can be from the current date to 90 days after the current date.

5. Code an event handler for the click event of the View Cancellation Policies button. This event handler should display the div element with an id of dialog as a modal Dialog widget.

6. Don't forget the links to the .css and .js files in the downloaded custom folder!

CODE

index.html

Reservation Request

name="reservation_form" id="reservation_form">

General Information

Arrival date:

*

Nights:

*

Adults:

1

2

3

4

Children:

0

1

2

3

4

Preferences

Room type:

Standard

Business

Suite

Bed type:

King

Double Double

Smoking

Contact Information

Name:

*

Email:

*

Phone:

*

Notification of cancellation or arrival date change must be

received more than three days (72 hours) prior to the confirmed arrival date for the

reservation deposit to be refundable. Email notification is acceptable, and a cancellation

confirmation will be sent to you. Failure to check-in on the scheduled arrival date

will result in the cancellation of the reservation including any remaining nights,

and the reservation deposit shall be forfeited.

main.css

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 87.5%;

background-color: white;

margin: 0 auto;

width: 600px;

border: 3px solid blue;

padding: 10px 20px;

}

legend {

color: blue;

font-weight: bold;

margin-bottom: .8em;

}

label {

float: left;

width: 100px;

}

input, select {

margin-left: 1em;

margin-right: 1em;

margin-bottom: .5em;

}

input {

width: 14em;

}

input.left {

width: 1em;

padding-left: 0;

}

fieldset {

border: none;

margin-left: 0;

margin-top: 1em;

padding: 0;

}

input.last {

margin-bottom: 1em;

}

#adults, #children {

width: 35px;

}

#smoking {

width: 1em;

margin-left: 0;

}

#policies {

margin-left: 0;

width: 15em;

}

#submit {

width: 10em;

}

#dialog p {

font-size: 85%;

}

span {

color: red;

}

reservation.js

$(document).ready(function() {

var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;

// move the focus to the first text box

$("#arrival_date").focus();

// the handler for the submit event of the form

// executed when the submit button is clicked

$("#reservation_form").submit(

function(event) {

var isValid = true;

// validate the requested arrival date

var arrivalDate = $("#arrival_date").val().trim();

if (arrivalDate == "") {

$("#arrival_date").next().text("This field is required.");

isValid = false;

} else {

$("#arrival_date").next().text("");

}

$("#arrival_date").val(arrivalDate);

// validate the number of nights

var nights = $("#nights").val().trim();

if (nights == "") {

$("#nights").next().text("This field is required.");

isValid = false;

} else if (isNaN($("#nights").val())) {

$("#nights").next().text("This field must be numeric.");

isValid = false;

} else {

$("#nights").next().text("");

}

$("#nights").val(nights);

// validate the name entry

var name = $("#name").val().trim();

if (name == "") {

$("#name").next().text("This field is required.");

isValid = false;

}

else {

$("#name").val(name);

$("#name").next().text("");

}

$("#name").val(name);

// validate the email entry with a regular expression

var email = $("#email").val();

if (email == "") {

$("#email").next().text("This field is required.");

isValid = false;

} else if ( !emailPattern.test(email) ) {

$("#email").next().text("Must be a valid email address.");

isValid = false;

} else {

$("#email").next().text("");

}

$("#email").val(email);

// validate the phone number

var phone = $("#phone").val().trim();

if (phone == "") {

$("#phone").next().text("This field is required.");

isValid = false;

} else {

$("#phone").next().text("");

}

$("#phone").val(phone);

// prevent the submission of the form if any entries are invalid

if (isValid == false) {

event.preventDefault();

}

} // end function

); // end submit

}); // end ready

response.html

body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;

margin: 0 auto;

width: 600px;

border: 3px solid blue;

padding: 20px;

}

Thank you for your request!

We will contact you within the next 24 hours.

***There is also a folder named jquery-ui-1.12.1.custom with formatting code and images in there. I don't think it's very necessary for the assignment but instead makes things look pretty in the end. Let me know if you need it.

Reservation Request General Information Preferences Contact Information Arrival date: |01/27/2017 Nights: O January 2017 Su Mo Tu We Th Fr Sa Childre 123 4567 910 11 12 13 1 5 16 17 18 19 20 21 22 23 24 25 26 9 30 31 View Cancellation F 27 28 Reservation Request General Information Preferences Contact Information Arrival date: |01/27/2017 Nights: O January 2017 Su Mo Tu We Th Fr Sa Childre 123 4567 910 11 12 13 1 5 16 17 18 19 20 21 22 23 24 25 26 9 30 31 View Cancellation F 27 28