Reservation Request

Open the folder and display the page, it looks like this: see image.

Run the page and click the Submit Request button to see the page that is displayed when the form is submitted, there is currently no validation. You will add validation, and also enhance the user interface by adding some jQuery widgets. Make sure to READ EVERYTHING FIRST then implement ONE THING AT A TIME.

Start by moving the focus to the Arrival date text box when the page loads.

DATA VALIDATION MODIFICATIONS

The JavaScript file contains a variable emailPattern that contains the pattern to validate the email address, and a variable phonePattern to validate the phone number (xxx-xxx-xxxx).

You will code an event handler for the submit event of the form. This event handler should validate the user entries and cancel the submission of the form if any of the entries are invalid.

Required validation is:

• A valid must be entered in nights, name, email, and phone. Display error message in the span element that follows.
• The number of nights must be numeric. Display error message in the span element that follows.
• The email address must match the pattern provided in emailPattern. Display error message in the span element that follows ("must be valid email address").
• The phone number must match the pattern provided in phonePattern. Display error message in the span element that follows ("must be in format xxx-xxx-xxxx').
• Be sure to trim the entries and put them back in the controls regardless of whether the entries are valid

Figure: see image.

USER INTERFACE MODIFICATIONS

You will also add jQuery widgets to enhance the user interface.

Modify the page to use Tabs: the three fieldset elements will be implemented as three tabs of a Tabs widget. Set the headings for the tabs to the content of the legend elements. After you do this you can delete the fieldset and legend elements. [You might want to create a copy of index.html called indexOriginal.html to have a reference for the code. Then create a new index.html page and copy content over as needed. Make sure to look at the book example for reference first, ask questions if it is not clear how it works.]

Figure: see image.

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

Figure: see image.

Code an event handler for the click event of the View Cancellation Policies button. When this button is clicked the div element with an id of "dialog" should be displayed as a modal Dialog widget.

Figure: see image.

Starter Codes

index.html

< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< title >Reservation request - Victor Catalan< /title >
< link rel="stylesheet" href="main.css" >
< link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.custom/jquery-ui.min.css" >

< /head >

< body >
< h1 >Reservation Request< /h1 >
< form action="response.html" method="get"
name="reservation_form" id="reservation_form" >
< div id="tabs" >
< ul >
< li >< a href="#tabs-1" >General Information< /a >< /li >
< li >< a href="#tabs-2" >Preferences< /a >< /li >
< li >< a href="#tabs-3" >Contact Information< /a >< /li >
< /ul >
< div id="tabs-1" >
< fieldset >
< legend >General Information< /legend >
< label for="arrival_date" >Arrival date:< /label >
< input type="text" name="arrival_date" id="arrival_date" autofocus >< br >
< label for="nights" >Nights:< /label >
< input type="text" name="nights" id="nights" >< span >*< /span >< br >
< label >Adults:< /label >
< select name="adults" id="adults" >
< option value="1" >1< /option >
< option value="2" >2< /option >
< option value="3" >3< /option >
< option value="4" >4< /option >
< /select >< br >
< label >Children:< /label >
< select name="children" id="children" >
< option value="0" >0< /option >
< option value="1" >1< /option >
< option value="2" >2< /option >
< option value="3" >3< /option >
< option value="4" >4< /option >
< /select >
< /fieldset >
< /div >
< div id="tabs-2" >
< fieldset >
< legend >Preferences< /legend >
< label >Room type:< /label >
< input type="radio" name="room" id="standard" class="left" checked >Standard
< input type="radio" name="room" id="business" class="left" >Business
< input type="radio" name="room" id="suite" class="left last" >Suite< br >
< label >Bed type:< /label >
< input type="radio" name="bed" id="king" class="left" checked >King
< input type="radio" name="bed" id="double" class="left last" >Double Double< br >
< input type="checkbox" name="smoking" id="smoking" >Smoking< br >
< /fieldset >
< /div >
< div id="tabs-3" >
< fieldset >
< legend >Contact Information< /legend >
< label for="name" >Name:< /label >
< input type="text" name="name" id="name" >< span >*< /span >< br >
< label for="email" >Email:< /label >
< input type="text" name="email" id="email" >< span >*< /span >< br >
< label for="phone" >Phone:< /label >
< input type="text" name="phone" id="phone" placeholder="999-999-9999" >< span >*< /span >< br >
< /fieldset >
< /div >
< /div >

< fieldset >
< input type="button" id="policies" value="View Cancellation Policies" >
< input type="submit" id="submit" value="Submit Request" >
< div id="dialog" title="Cancellation Policies" style="display: none;" >
< p >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.< /p >
< /div >< br >
< /fieldset >

< /form >

< script src="https://code.jquery.com/jquery-3.4.1.min.js" >< /script >
< script src="jquery-ui-1.12.1.custom/jquery-ui.min.js" >< /script >
< script src="reservation.js" >< /script >
< /body >
< /html >

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;
}

response.html

< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< title >Reservation Request - Victor Catalan< /title >
< style >
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 20px;
}
< /style >
< /head >

< body >
< main >
< h3 >Thank you for your request!< /h3 >
< p >We will contact you within the next 24 hours.< /p >
< /main >
< /body >
< /html >