Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Open the index.html and reservation.js files in this folder: exercises_extrach10 eservation Then, run the application and click the Submit Request button to see the page

Open the index.html and reservation.js files in this folder:

 exercises_extra\ch10 eservation\ 

Then, run the application and click the Submit Request button to see the page thats displayed when the form is submitted to the server.

In the JavaScript file, notice that the ready event handler contains the declaration for a variable named emailPattern that contains the pattern that will be used to validate the email address.

Code a statement that moves the focus to the Arrival date text box.

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. The validation is as follows:

A value must be entered into each text box. The number of nights must be numeric. The email address must match the pattern thats provided.

Be sure to trim the entries and put them back into the controls regardless of whether the entries are valid.

INDEX.html

Reservation request

Reservation Request

name="reservation_form" id="reservation_form">

General Information

*

*

Preferences

Standard

Business

Suite

King

Double Double

Smoking

Contact Information

*

*

*

main.css

body {

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

background-color: white;

margin: 0 auto;

width: 600px;

border: 3px solid blue;

padding: 10px 20px;

}

fieldset {

margin-top: 1em;

margin-bottom: 1em;

padding: .5em;

}

legend {

color: blue;

font-weight: bold;

font-size: 85%;

margin-bottom: .5em;

}

label {

float: left;

width: 90px;

}

input, select {

margin-left: 1em;

margin-right: 1em;

margin-bottom: .5em;

}

input {

width: 14em;

}

input.left {

width: 1em;

padding-left: 0;

}

p {

margin-top: 0;

margin-bottom: .5em;

}

input.last {

margin-bottom: 1em;

}

#adults, #children {

width: 35px;

}

#smoking {

width: 1em;

margin-left: 0;

}

#submit {

margin-left: 0;

width: 10em;

}

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

}); // end ready

response.html

Reservation Request

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.

image text in transcribed

Reservation Request General Information Arrival date: /27/2017 Nights Adults: Children 2 Preferences Room type Standard Business Suite Bed type King Double Double Smoking Contact information Name: ne Boehm Email Phone: anne@murach Must be a valid email address 999-999-9999 This field is required Submit Request

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Intelligent Information And Database Systems Asian Conference Aciids 2012 Kaohsiung Taiwan March 2012 Proceedings Part 2 Lnai 7197

Authors: Jeng-Shyang Pan ,Shyi-Ming Chen ,Ngoc-Thanh Nguyen

2012th Edition

3642284892, 978-3642284892

More Books

Students also viewed these Databases questions