for the following java script code follow the directions below <!DOCTYPE html> <
ID: 3860712 • Letter: F
Question
for the following java script code follow the directions below
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 6
Hands-on Project 6-1
Author:
Date:
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hands-on Project 6-1</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 6-1
</h1>
</header>
<article>
<h2>Personal Information</h2>
<form action="results.htm">
<div id="errorText"></div>
<div id="numErrorText"></div>
<fieldset id="contactinfo">
<label for="addrinput">
Street Address
</label>
<input type="text" id="addrinput" name="Address" required="required" placeholder="number and street name" />
<label for="cityinput">
City
</label>
<input type="text" id="cityinput" name="City" required="required" />
<label for="stateinput">
State/Province
</label>
<input type="text" id="stateinput" name="State" required="required" />
<label for="zipinput">
Zip/Postal Code
</label>
<input type="number" id="zipinput" name="Zip" required="required" />
<label for="ssn1">
Social Security Number
</label>
<input type="number" id="ssn1" name="SSN1" class="ssn" maxlength="3" required="required" />
<label for="ssn2" id="ssn2label">
Social Security Number (continued)
</label>
<input type="number" id="ssn2" name="SSN2" class="ssn" maxlength="2" required="required" />
<label for="ssn3" id="ssn3label">
Social Security Number (end)
</label>
<input type="number" id="ssn3" name="SSN3" class="ssn" maxlength="4" required="required" />
</fieldset>
<fieldset id="submitsection">
<input type="submit" id="submitBtn" value="Submit" />
</fieldset>
</form>
</article>
</body>
</html>
1. Return to the index.htm file in your browser, within the body section, just before the clos- ing </body> tag, add a script element, and then specify the file script.js as the source.
.2. In the opening <form> tag, add code to disable browser-based validation, and then save your changes.
3.. In the script.js file, add code instructing processors to interpret the contents in strict mode, and then create a global variable named formValidity and set its value to true.
4.
4. add the following function to validate the required form elements
/* validate required fields */
function validateRequired() {
var inputElements = document.querySelectorAll(
"#contactinfo input");
var errorDiv = document.getElementById("errorText");
var elementCount = inputElements.length;
var requiredValidity = true;
var currentElement;
try {
for (var i = 0; i < elementCount; i++) {
// validate all input elements in fieldset
currentElement = inputElements[i];
if (currentElement.value === "") {
currentElement.style.background = "rgb(255,233,233)";
requiredValidity = false;
} else {
currentElement.style.background = "white";
}
}
if
(requiredValidity === false) {
throw "Please complete all fields.";
}
errorDiv.style.display =
errorDiv.innerHTML = "";
}
"none";
catch(msg) {
errorDiv.style.display =
errorDiv.innerHTML = msg;
formValidity = false;
} }
5. Add the following function to create an event listener for the submit event:
/* create event listeners */
function createEventListeners() {
var form = document.getElementsByTagName("form")[0];
if (form.addEventListener) {
form.addEventListener("submit", validateForm, false);
} else if (form.attachEvent) {
form.attachEvent("onsubmit", validateForm);
}
}
6.
Add the following code to call the createEventListeners() function when the page finishes loading:
/* validate form */
function validateForm(evt) {
if (evt.preventDefault) {
evt.preventDefault(); // prevent form from submitting
} else {
evt.returnValue = false; // prevent form from submitting
in IE8
}
formValidity = true; // reset value for revalidation
validateRequired();
. if (formValidity === true) {
document.getElementsByTagName("form")[0].submit();
}
}
7. Add the following code to call the createEventListeners() function when the page finishes loading:
/* run setup functions when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}
8. addthefollowingfunctiontovalidate input elements with the number type:
/* validate number fields for older browsers */
function validateNumbers() {
var numberInputs = document.querySelectorAll(
"#contactinfo input[type=number]");
var elementCount = numberInputs.length;
var numErrorDiv = document.getElementById("numErrorText");
var numbersValidity = true;
var currentElement;
try {
for (var i = 0; i < elementCount; i++) {
// validate all input elements of type "number" in fieldset currentElement = numberInputs[i];
if (isNaN(currentElement.value) || (currentElement.value
=== "")) {
currentElement.style.background = "rgb(255,233,233)";
numbersValidity = false;
} else {
currentElement.style.background = "white";
} }
if
(numbersValidity === false) {
throw "Zip and Social Security values must be numbers.";
}
numErrorDiv.style.display = "none";
numErrorDiv.innerHTML = "";
}
catch(msg) {
numErrorDiv.style.display = "block";
9.
9. In the validateForm()function,add a call to the validate Numbers()function as follows:
function validateForm(evt) {
if (evt.preventDefault) {
evt.preventDefault(); // prevent form from submitting }else{
evt.returnValue = false; // prevent form from submitting
in IE8
formValidity = true; // reset value for revalidation
validateRequired();
validateNumbers();
if (formValidity === true) {
document.getElementsByTagName("form")[0].submit();
}
}
Explanation / Answer
index.htm file
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 6
Hands-on Project 6-1
Author:
Date:
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hands-on Project 6-1</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 6-1
</h1>
</header>
<article>
<h2>Personal Information</h2>
<form action="results.htm" novalidate>
<div id="errorText"></div>
<div id="numErrorText"></div>
<fieldset id="contactinfo">
<label for="addrinput">
Street Address
</label>
<input type="text" id="addrinput" name="Address" required="required" placeholder="number and street name" />
<label for="cityinput">
City
</label>
<input type="text" id="cityinput" name="City" required="required" />
<label for="stateinput">
State/Province
</label>
<input type="text" id="stateinput" name="State" required="required" />
<label for="zipinput">
Zip/Postal Code
</label>
<input type="number" id="zipinput" name="Zip" required="required" />
<label for="ssn1">
Social Security Number
</label>
<input type="number" id="ssn1" name="SSN1" class="ssn" maxlength="3" required="required" />
<label for="ssn2" id="ssn2label">
Social Security Number (continued)
</label>
<input type="number" id="ssn2" name="SSN2" class="ssn" maxlength="2" required="required" />
<label for="ssn3" id="ssn3label">
Social Security Number (end)
</label>
<input type="number" id="ssn3" name="SSN3" class="ssn" maxlength="4" required="required" />
</fieldset>
<fieldset id="submitsection">
<input type="submit" id="submitBtn" value="Submit" />
</fieldset>
</form>
</article>
<script src="script.js">
</script>
</body>
</html>
script.js file
"use strict";
var formValidity = true;
/* validate required fields */
function validateRequired() {
var inputElements = document.querySelectorAll("#contactinfo input");
var errorDiv = document.getElementById("errorText");
var elementCount = inputElements.length;
var requiredValidity = true;
var currentElement;
try {
for (var i = 0; i < elementCount; i++) {
// validate all input elements in fieldset
currentElement = inputElements[i];
if (currentElement.value === "") {
currentElement.style.background = "rgb(255,233,233)";
requiredValidity = false;
} else {
currentElement.style.background = "white";
}
}
if (requiredValidity === false) {
throw "Please complete all fields.";
}
errorDiv.style.display =
errorDiv.innerHTML = "";
}
catch (msg) {
errorDiv.style.display = "none";
errorDiv.innerHTML = msg;
formValidity = false;
}
}
/* create event listeners */
function createEventListeners() {
var form = document.getElementsByTagName("form")[0];
if (form.addEventListener) {
form.addEventListener("submit", validateForm, false);
} else if (form.attachEvent) {
form.attachEvent("onsubmit", validateForm);
}
}
/* validate form */
function validateForm(evt) {
if (evt.preventDefault) {
evt.preventDefault(); // prevent form from submitting
} else {
evt.returnValue = false; // prevent form from submitting in IE8
}
formValidity = true; // reset value for revalidation
validateRequired();
if(formValidity === true) {
document.getElementsByTagName("form")[0].submit();
}
}
/* run setup functions when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}
/* validate number fields for older browsers */
function validateNumbers() {
var numberInputs = document.querySelectorAll("#contactinfo input[type=number]");
var elementCount = numberInputs.length;
var numErrorDiv = document.getElementById("numErrorText");
var numbersValidity = true;
var currentElement;
try {
for (var i = 0; i < elementCount; i++) {
// validate all input elements of type "number" in fieldset currentElement = numberInputs[i];
if (isNaN(currentElement.value) || (currentElement.value === "")) {
currentElement.style.background = "rgb(255,233,233)";
numbersValidity = false;
} else {
currentElement.style.background = "white";
}
}
if (numbersValidity === false) {
throw "Zip and Social Security values must be numbers.";
}
numErrorDiv.style.display = "none";
numErrorDiv.innerHTML = "";
} catch (msg) {
numErrorDiv.style.display = "block";
}
}
function validateForm(evt) {
if (evt.preventDefault) {
evt.preventDefault(); // prevent form from submitting }else{
evt.returnValue = false; // prevent form from submitting in IE8
formValidity = true; // reset value for revalidation
validateRequired();
validateNumbers();
if (formValidity === true) {
document.getElementsByTagName("form")[0].submit();
}
}
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.