Assignment 3

Copy of Asssignment 3 from COP4813 Web Systems One

by ClarenceDowns

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Assignment Three</title>
  </head>

  <body>
    <div id="container">
      <div id="header">
        <a href="work.html" class="previous">&laquo; Previous</a>
        <h1>Please Complete the Following Form</h1>
      </div>
      <div id="body">

        <form name="myForm" onclick="return validate()" action="Assignment3.html">
          <label for="firstname">First Name:</label>
          <input type="text" id="fname" name="name" autofocus><span id="fnameError"></span><br>
          <label for="lastname">Last Name:</label>
          <input type="text" id="lname" name="name"><span id="lnameError"></span><br>
          <label for="address">Address:</label>
          <input type="text" id="address"><span id="addressError"></span><br>
          <label for="city">City:</label>
          <input type="text" id="city"><span id="cityError"></span><br>
          <label for="state">State:</label>
          <input type="text" id="state"><span id="stateError"></span><br>
          <label for="zipcode">Zip Code:</label>
          <input type="text" id="zipcode"><span id="zipCodeError"></span><br>
          <label for="phonenumber">Phone:</label>
          <input type="text" id="phonenumber"><span id="phoneNumberError"></span><br>
          <label for="emailaddress">Email:</label>
          <input type="text" placeholder="[email protected]" id="email" name="email">
          <span id="emailError"></span><br>
          <label for="birthdate">Birth Date:</label>
          <input type="date" id="birthdate"><span id="birthDateError"></span><br>
          <button type="button"...

CSS

html,
        body {
          padding: 0;
          margin: 0;
          background: #444;
          color: #fff;
          height: 100%;
          margin: 0;
          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
          line-height: 1.5;
        }

        span {
          color: red;
        }

        #container {
          min-height: 100%;
          position: relative;
        }

        #header {
          background: #444;
          padding: 10px;
        }

        #body {
          padding: 10px;
          padding-bottom: 60px;

          /* Height fo the footer */
        }

        #footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 60px;

          /* Height fo the footer */
          text-align: center;
          background: #2b2b2b;
          padding: 0;
          color: #fff;
        }

        label {
          float: left;
          width: 8em;
          text-align: right;
        }

        input {
          width: 15em;
          margin-left: 1em;
          margin-bottom: 0.5em;
        }

        input :focus {
          border: 2px solid yellow;
        }

        button {
          width: 7em;
          box-shadow: 2px 2px 0 rgb(255, 255, 51);
          margin-left: 14em;
          background-color: silver;
        }

        a {
          text-decoration: none;
          display: inline-block;
          padding: 8px 16px;
        }

        a:hover {
          background-color: #ddd;
          color: black;
        }

        .previous {
          margin-top: 10px;
          margin-left: 8px;
          background-color: silver;
          color: black;
          box-shadow: 3px 3px 0 rgb(255, 255, 51);
        }

        #main-footer {
          text-align: center;
          padding: 1rem;
          background: #2b2b2b;
          color: #fff;
          height: 2em;

        }

JavaScript

// Validate all Fields
function validate() {
  validateFname();
  validateLName();
  validateEmail();
  validateAddress();
  validateCity();
  validateState();
  validateZipCode();
  validatePhone();
  validateBirthDate();
}
// Name Validation
function validateFname() {
  var fname = document.getElementById("fname").value;
  return validateNotBlank(fname, "fnameError");
}

function validateLName() {
  var lname = document.getElementById("lname").value;
  return validateNotBlank(lname, "lnameError");
}

function validateNotBlank(value, er) {
  if (value == null || value == "") {
    document.getElementById(er).innerHTML =
      "(This field is required.) Please enter a name here.";
    return false;
  }
  return true;
}
// Email Validation
function validateEmail(inputText) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  var mailInput = document.getElementById("email").value;
  if (mailInput.match(mailformat)) {
    document.myform.email.focus();
    return true;
  } else {
    document.getElementById("emailError").innerHTML =
      "(This field is required.) You have entered an invalid email address.";
    //alert("You have entered an invalid email address!");
    return false;
  }
}

// Address Validation
function validateAddress() {
  var addressformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  var addressInput = document.getElementById("address").value;
  if (addressInput.match(addressformat)) {
    document.myform.address.focus();
    return true;
  } else {
    document.getElementById("addressError").innerHTML =
      "(This field is required.) You have entered an invalid address.";
    return false;
  }
}
// City Validation
function validateCity() {
  var cityformat = /^[0-9a-zA-Z]+$/;
  var cityInput = document.getElementById("city").value;
  if (cityInput.match(cityformat)) {
    document.myform.city.focus();
    return true;
  } else {
    document.getElementById("cityError").innerHTML =
      "(This field is required.)...