Here is what I am working on (JavaScript): 1. Code a statement that adds a span
ID: 3676677 • Letter: H
Question
Here is what I am working on (JavaScript):
1. Code a statement that adds a span element with the class “error” and the value “*” after each text box. Then, code a statement that moves the focus to the Arrival date text box.
2. 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 that’s provided.
3. Use cookies to store the valid Name and valid Arrival date.
I've got everything down and working except for the last step involving cookies (because I don't fully understand how the code is used) Any help would be appreciated!
JS
$(document).ready(function() {
// add span element after each input element
$(":text, #error").after("<span>*</span>");
// move focus to first text box
$("#arrival_date").focus();
// the handler for the click event of a submitbutton
$("#reservation_form").submit(
function(event) {
var isValid = true;
// validate the requested arrival date
if ($("#arrival_date").val() == "") {
$("#arrival_date").next().text("This field is required.");
isValid = false;
}
else {
$("#arrival_date").next().text("");
}
// validate the requested arrival nights
var numValue = /^[0-9]+$/;
if ($("#nights").val() == "") {
$("#nights").next().text("This field is required.");
isValid = false;
}
else if (!numValue.test(nights) ) {
$("#nights").next().text("Must be a numeric value.");
isValid = false;
}
else {
$("#nights").next().text("");
}
// validate the email entry with a regular expression
var emailPattern = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}/;
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("");
}
// validate the name entry
var fullName = $("#name").val().trim();
if (fullName == "") {
$("#name").next().text("This field is required.");
isValid = false;
}
else {
$("#name").next().text("");
}
// validate the phone number
var phone = $("#phone").val();
if (phone == "") {
$("#phone").next().text("This field is required.");
isValid = false;
} else if ( phone.length != 10 ) {
$("#phone").next().text("10 digits required.");
isValid = false;
}
else {
$("#phone").next().text("");
}
// submit the form if all entries are valid
if (isValid == false) {
event.preventDefault();
}
})
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reservation request</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>
<script src="reservation.js"></script>
</head>
<body>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<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"><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><br>
</fieldset>
<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>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone" placeholder="999-999-9999"><br>
</fieldset>
<input type="submit" id="submit" value="Submit Request"><br>
</form>
</body>
</html>
CSS
/* type selectors */
article, aside, figure, footer, header, nav, section {
display: block;
}
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;
}
label.error {
float: none;
color: red;
font-size: 87.5%;
}
span {
color: red;
}
Explanation / Answer
Process to add cookies:
1. First you need to call a javascript function to create cookies when the submit button is clicked.
For your application you need to modify the HTML code of the submit button as below:
<input type="submit" id="submit" value="Submit Request";"
cookievalue2 = escape(document.myform.arrival_date.value) + ";"
document.cookie = "name=" + cookievalue1 + "arrival_date=" + cookievalue2;
window.alert("Cookie Values : " + "name=" + cookievalue1 + " " + "arrival_date=" + cookievalue2);
}
Below is the working example of how to create cookies
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie() {
cookievalue1 = escape(document.myform.name.value) + ";"
cookievalue2 = escape(document.myform.arrival_date.value) + ";"
document.cookie = "name=" + cookievalue1 + "arrival_date=" + cookievalue2;
window.alert("Cookie Values : " + "name=" + cookievalue1 + " " + "arrival_date=" + cookievalue2);
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="name"/>
Enter name2: <input type="text" name="arrival_date"/>
<input type="button" value="Set Cookie"/>
</form>
</body>
</html>