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 todays 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

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:

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

}

}.

6. Add the following function to trigger validation of required fields when the Submit button is clicked

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

}

}

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

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();

}

}

8. 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); 

}

return to script.js in your editor, and then add the following function to validate 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"; 

 numErrorDiv.innerHTML = msg; 

formValidity = false;

}

}

in the validate Form() function, add a call to the validateNumbers() 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(); } 

}