assignment 3 web systems

by Mike Kerney

HTML

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Assignment #3</title>
    <link href="BlogPostAssets/styles/blogPostStyle.css" rel="stylesheet" type="text/css">
    <script>
      var __adobewebfontsappname__ = "dreamweaver"

    </script>
    <script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
   <script src="menu.js"></script>
   <script src="validate.js"></script>
  </head>

  <body>
    <div id="mainwrapper">
      <header>

        <div id="logo"> <img src="Images/logo.png" alt="Web Systems Logo" height="50"> </div>
        <nav>
          <ul id="sddm">
            <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
              <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="index.html">Home</a>
              </div>
            </li>
            <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Assignments</a>
              <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="assignment1.html">Assignment 1</a>
                <a href="index.html">Assignment 2 - Home Page</a>
                <a href="assignment3.html">Assignment 3 - Form Validation</a>
              </div>
            </li>
            <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Other</a>
              <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="kidspage.html">Kid's Projects</a>
              </div>
            </li>
          </ul>
        </nav>
      </header>
      <div id="content">

        <section id="mainContent">

          <h1>Form Validation Page</h1>
          <h3>Please fill in the following fields.</h3>
          <form name="Form1" onsubmit="return ValidateForm()" method="post"...

CSS

@charset "UTF-8";
#mainwrapper header {
  /*Header */
  background-color: rgba(0, 0, 0, 1.00);
  overflow: auto;
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
}

#mainwrapper header #logo {
  /* Company Logo text */
  width: 28%;
  float: left;
  padding-left: 2%;
  padding-top: 0px;
  padding-bottom: 0px;
  color: rgba(0, 0, 0, 1.00);
  background-color: greenyellow;
  margin-right: auto;
  margin-left: left;
}

#mainwrapper header nav {
  /*Nav bar containing links in header */
  text-align: right;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 2%;
  width: 68%;
  float: left;
  color: rgba(146, 146, 146, 1.00);
  background-color: black;
  border-color: greenyellow;
}

header nav a {
  /* Links in header */
  padding-right: 2%;
}

#content #mainContent h1,
#content #mainContent h2 {
  /* Styling for main headings */
  color: greenyellow;
}

#content #mainContent h3 {
  /*Captions ot Taglines */
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  font-style: italic;
  font-weight: 200;
  color: greenyellow;
  display: list-item;
}

#content #mainContent #bannerImage {
  /*Container for main banner image */
  width: 100%;
  background-color: rgba(208, 207, 207, 1.00);
}

#content #mainContent p {
  /* All paragraphs under maincontent */
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  font-style: normal;
  font-weight: 200;
  text-align: center;
  color: greenyellow;
}

#content #mainContent #authorInfo {
  /* Author info section */
  background-color: rgba(0, 0, 0, 1.00);
}

#content #mainContent #authorInfo h2,
#content #mainContent #authorInfo p {
  color: rgba(173, 255, 47, 1.00);
  padding-left: 2%;
  padding-top: 11px;
  background-color: black;
}

#content #mainContent #authorInfo p {
  color: rgba(255, 255, 255, 1.00);
  padding-left: 2%;
  padding-top: 0px;
  padding-bottom: 11px;
  padding-right: 2%;
}

footer article {
  /* Footer...

JavaScript

// JavaScript document

function ValidateForm() {
  alert("Now Validating Form");
  if (!ValidateNotBlank(document.forms["Form1"]["first_name"].value, "First Name")) return false;
  if (!ValidateNotBlank(document.forms["Form1"]["last_name"].value, "Last Name")) return false;
  if (!validateEmail(document.forms["Form1"]["EMail"].value, "Email")) return false;
  if (!validateDoB(document.forms["Form1"]["DoB"].value, "DoB")) return false;
  if (!ValidateNotBlank(document.forms["Form1"]["message1"].value, "Message")) return false;
  if (!validatebot(document.forms["Form1"]["notabot"].value, "Message")) return false;
  if (!validatestate(document.forms["Form1"]["state"].value, "Message")) return false;
  if (!validatezip(document.forms["Form1"]["zip"].value, "Message")) return false;
  //if (!validateaddress(document.forms["Form1"]["adress"].value, "Message" ))  return false;

  return true;
}

function ValidateNotBlank(val, message) {
  alert("Now validating Not blank " + message);
  if (val == null || val == "") {
    alert("Must enter a value for " + message);
    return false;
  }
  return true;
}

function validateEmail(val, message) {
  alert("checking email")
  var atpos = val.indexOf("@");
  var dotpos = val.lastIndexOf(".");

  if (atpos < 1 || (dotpos - atpos < 2)) {
    alert("Please enter valid email ID")
    document.Form1.EMail.focus();
    return false;
  }
  return true;
}

function validateDoB(val, message) {
  alert("checking dob")
  // First check for the pattern
  if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(val)) {
    alert("Please enter valid date");
    return false;
  }

  // Parse the date parts to integers
  var parts = val.split("/");
  var day = parseInt(parts[1], 10);
  var month = parseInt(parts[0], 10);
  var year = parseInt(parts[2], 10);

  // Check the ranges of month and year
  if (year < 1900 || year > 2018 || month == 0 || month > 12) {
    alert("Please enter valid date (year and month must be valid)");
    return false;
  }

  var...