in the following javascript code follow the directions below Project Name : Hand
ID: 3860877 • Letter: I
Question
in the following javascript code follow the directions below
Project Name : Hands-on Project
Name : < Nick>
Date : <july 27th>
-->
<!-- 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();
}
}
1.Open script.js, and then in the comment section, change “Hands-on Project - ” to Hands-on Project -6-2
2.Add the following three functions to replicate the behavior in modern browsers of the placeholder attribute:
/* remove fallback placeholder text */
function zeroPlaceholder() {
var addressBox = document.getElementById("addrinput");
addressBox.style.color = "black";
if (addressBox.value === addressBox.placeholder) {
addressBox.value = "";
}
}
/* restore placeholder text if box contains no user entry */
function checkPlaceholder() {
var addressBox = document.getElementById("addrinput");
if (addressBox.value === "") {
addressBox.style.color = "rgb(178,184,183)";
addressBox.value = addressBox.placeholder;
}
}
/* add placeholder text for browsers that don’t support placeholder
attribute */
function generatePlaceholder() {
if (!Modernizr.input.placeholder) {
var addressBox = document.getElementById("addrinput");
addressBox.value = addressBox.placeholder;
addressBox.style.color = "rgb(178,184,183)";
if (addressBox.addEventListener) {
addressBox.addEventListener("focus", zeroPlaceholder, false);
addressBox.addEventListener("blur", checkPlaceholder, false);
} else if (addressBox.attachEvent) {
addressBox.attachEvent("onfocus", zeroPlaceholder);
addressBox.attachEvent("onblur", checkPlaceholder);
}
}
}
Create the following function to call other functions to set up the page:
/* run initial form configuration functions */
function setUpPage() {
createEventListeners();
generatePlaceholder();
}
Change the event listener code at the end of the file to the following:
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}
Explanation / Answer
Code :
<!-- 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.innerHTML = "none";
}
catch(msg) {
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();
}
}
/* remove fallback placeholder text */
function zeroPlaceholder() {
var addressBox = document.getElementById("addrinput");
addressBox.style.color = "black";
if (addressBox.value === addressBox.placeholder) {
addressBox.value = "";
}
}
/* restore placeholder text if box contains no user entry */
function checkPlaceholder() {
var addressBox = document.getElementById("addrinput");
if (addressBox.value === "") {
addressBox.style.color = "rgb(178,184,183)";
addressBox.value = addressBox.placeholder;
}
}
/* add placeholder text for browsers that don’t support placeholder
attribute */
function generatePlaceholder() {
if (!Modernizr.input.placeholder) {
var addressBox = document.getElementById("addrinput");
addressBox.value = addressBox.placeholder;
addressBox.style.color = "rgb(178,184,183)";
if (addressBox.addEventListener) {
addressBox.addEventListener("focus", zeroPlaceholder, false);
addressBox.addEventListener("blur", checkPlaceholder, false);
} else if (addressBox.attachEvent) {
addressBox.attachEvent("onfocus", zeroPlaceholder);
addressBox.attachEvent("onblur", checkPlaceholder);
}
}
}
/* run initial form configuration functions */
function setUpPage() {
createEventListeners();
generatePlaceholder();
}
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}
Please let me know what is exactly required to do. Also provide the html code to test it.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.