6.1 In the following javascript follow the instructions below Hands-on Project 6
ID: 3860772 • Letter: 6
Question
6.1 In the following javascript follow the instructions below
Hands-on Project 6-1
Hands-on Project 6-1
Personal Information
Street Address
City
State/Province
Zip/Postal Code
Social Security Number
Social Security Number (continued)
Social Security Number (end)
. 1. add JavaScript comments containing the text Hands-on Project - , your name, and today’s date, and then save the file to the HandsOnProject - folder with the name script.js.
2. Return to the index.htm file in your browser, within the body section, just before the clos- ing tag, add a script element, and then specify the file script.js as the source.
3.. In the opening <form> tag, add code to disable browser-based validation, and then save your changes.
.4. 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.
.5.Add the following function to validate the required form elements:
}
if (requiredValidity === false) {
}
}.
6. Add the following function to trigger validation of required fields when the Submit button is clicked
}
}
7.Add the following function to trigger validation of required fields when the Submit button is clicked:
1
2
3
4
5
6
7 8}
9 formValidity = true; // reset value for revalidation
10 validateRequired();
11 if (formValidity === true) {
12 document.getElementsByTagName("form")[0].submit();
13 }
14 }
Add the following code to call the createEventListeners() function when the page finishes loading:
/* validate form */
}
formValidity = true; // reset value for revalidation
validateRequired();
if (formValidity === true) {
document.getElementsByTagName("form")[0].submit();
}
}
8. Add the following code to call the createEventListeners() function when the page finishes loading
}
return to script.js in your editor, and then add the following function to validate input elements with the number type:
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
}
}
if (numbersValidity === false) {
formValidity = false;
}
}
in the validate Form() function, add a call to the validateNumbers() function as follows:
evt.preventDefault(); // prevent form from submitting
} else {
evt.returnValue = false; // prevent form from submitting in IE8
}
}
}
Explanation / Answer
Please find the required files below with necessary changes.
script.js
<!-- File information comment section -->
<!--
Project Name : Hands-on Project
Name : < your name>
Date : <today’s date>
-->
<!-- Strict mode and global varible formValidity added-->
"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 = ""none";
}
catch(msg) {
errorDiv.style.display =
errorDiv.innerHTML = msg;
formValidity = false;
}
}
/* create event listeners */
function createEventListeners() {
alert(2);
var form = document.getElementsByTagName("form")[0];
if (form.addEventListener) {
form.addEventListener("submit", validateForm, false);
} else if (form.attachEvent) {
form.attachEvent("onsubmit", validateForm);
}
}
/* 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";
numErrorDiv.innerHTML = msg;
formValidity = false;
}
}
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();
}
}
index.htm
<!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>
<!-- Onload javascript method added to sense the page load complete state and invoked createEventListeners(); -->
<body>
<header>
<h1>
Hands-on Project 6-1
</h1>
</header>
<article>
<h2>Personal Information</h2>
<!-- added code to disable the browser validation -->
<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.js included -->
<script src="script.js"></script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.