Untitled

<!DOCTYPE html>
<html>
<head>
   <!--
      JavaScript 6th Edition
      Chapter 6
      Hands-on Project 6-1

      Author:
      Date:

      Filename: index.htm
      Supporting files: modernizr.custom.65897.js, styles.css, script.js
   -->
   <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/styles.css" />
   <script src="JavaScriptsmodernizr.custom.65897.js"></script>
   <script src="JavaScriptsscript.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>

"use strict";

var formValidity = true;

/* remove fallback placeholder text */
function zeroPlaceholder() {
   var addressBox = document.getElementById("addrinput");
   addressBox.style.color = "red";
   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);
      }
   }
}

/* 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 = "none";
      errorDiv.innerHTML = "";
   }
   catch(msg) {
      errorDiv.style.display = "block";
      errorDiv.innerHTML = msg;
      formValidity = false;
   }
}
/* 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;
   }
}

/* 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();
   validateNumbers();
   if (formValidity === true) {
      document.getElementsByTagName("form")[0].submit();
   }
}

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

/* run initial form configuration functions */
function setUpPage() {
   createEventListeners();
   generatePlaceholder();
}

/* run setup functions when page finishes loading */
if (window.addEventListener) {
   window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
   window.attachEvent("onload", setUpPage);
}