title: HTML Validation JS without using PHP
body: <p>I made an application for people to fill out an application. I did some of the in form validation but now I want to ensure that when the user hits the submit button it checks to ensure that all field are filled out. I am stuck and cannot figure out the last part of this puzzle. </p>
  
  <p>I believe all I need to make this work is a Application.js If someone could take a look at this and let me know what if anything I am missing. I did not include the CSS sheet or photos. Thank you for taking the time to help.</p>
  
  <p>Here is the form. "Application.html"</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt; 
  
      &lt;head&gt;
  &lt;center&gt;&lt;h1&gt;AIFC Application Form&lt;/h1&gt;&lt;/center&gt;
  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;     
  &lt;title&gt;AIFC Application&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="author" content="Paul Skinner"&gt;
  &lt;link rel="stylesheet" type="text/css" href="Application.css" /&gt;
  &lt;style type="text/css"&gt;
  
  
  
  &lt;/style&gt;
  
  &lt;script src="Application.js"&gt;&lt;/script&gt;
  &lt;script src="Application_Library.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  function updateTotal() {
  
      var basePrice = 50;
      var optionsPrice = 0;
      var memberPrice = 0;
  
      function checkPayment() {
          if (document.getElementById('payment0').checked) {
  
              optionsPrice += 1;
          }
  
          if (document.getElementById('payment1').checked) {
  
              optionsPrice += 9.6;
          }
  
  
      } // end of checking for payment
  
      function checkJumper() {
          if (document.getElementById('jumper0').checked) {
  
              optionsPrice += 0;
          }
  
          if (document.getElementById('jumper1').checked) {
  
              optionsPrice += 4.4;
          }
  
  
      } // end of checking for Jumper
  
      function checkMembership() {
  
          if (document.getElementById('membership').value == 'Basic') {
              memberPrice += 75;
          }
  
          if (document.getElementById('membership').value == 'Silver') {
              memberPrice += 125;
          }
  
          if (document.getElementById('membership').value == 'Gold') {
              memberPrice += 150;
          }
  
      } // end of check membership function
  
      checkPayment();
      checkJumper();
      checkMembership();
  
  
      var totalPrice = basePrice + (optionsPrice * memberPrice);
      document.getElementById('optionsPrice').innerHTML = optionsPrice;
      document.getElementById('memberPrice').innerHTML = "$ " + memberPrice;
      document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="top"&gt;
       &lt;nav class="horizontalNav"&gt;
         &lt;ul&gt;
  
             &lt;li&gt;&lt;a href="fitness.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="application.html"&gt;Application&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="WhoWeAre.html"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="Pricing.html"&gt;Our Packages&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;   
  
      &lt;/nav&gt;&lt;/div&gt;
  &lt;section&gt;
      &lt;table&gt;
          &lt;tr style="white-space:nowrap; clear:both"&gt;
  &lt;td&gt;&lt;img src="Images/girl punching.jpg" alt="Girl Punching" style=" float:left; height:200px" /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;img src="images/fitness.jpg" alt="Weights" style=" float:right; height:200px; width:900px" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
       &lt;/table&gt;
   &lt;/section&gt;
  
  &lt;form action="#" method="get" name="application" id="application" &gt;
  &lt;div id="form"&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Payment Type&lt;/legend&gt;&lt;br&gt;
  &lt;input type="radio" name="payment" id="payment0" value="payment0" onchange="updateTotal()"&gt; Monthly membership &lt;br&gt; 
  &lt;input type="radio" name="payment" id="payment1" value="payment1" onchange="updateTotal()"&gt; Yearly membership &lt;b&gt;Big Savings!&lt;/b&gt; &lt;br&gt;&lt;br&gt;
  
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Choose a Location&lt;/legend&gt;&lt;br&gt;
  &lt;input type="radio" name="jumper" id="jumper0" value="jumper0" onchange="updateTotal()"&gt; Single Gym location
  &lt;input type="radio" name="jumper" id="jumper1" value="jumper1" onchange="updateTotal()"&gt; All Locations &lt;br&gt;&lt;br&gt;
  
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Membership Type&lt;/legend&gt;&lt;br&gt;
  &lt;select name="membership" id="membership" onchange="updateTotal()"&gt;
      &lt;option value="Basic"&gt;Basic Membership ($75)&lt;/option&gt;
      &lt;option value="Silver"&gt;Silver Membership ($125)&lt;/option&gt;
      &lt;option value="Gold"&gt;Gold Membership ($150)&lt;/option&gt;&lt;br&gt;
  &lt;/select&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Sex&lt;/legend&gt;&lt;br&gt;
  &lt;input type="radio" name="sex" value="male"&gt;Male&lt;br&gt;
  &lt;input type="radio" name="sex" value="female"&gt;Female&lt;br&gt;
  &lt;/fieldset&gt;
  
  &lt;/div&gt;
  
  &lt;div id="prices"&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;td&gt;Membership Application Fee&lt;/td&gt;&lt;td id="basePrice"&gt;$50&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Option factor&lt;/td&gt;&lt;td id="optionsPrice"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Membership&lt;/td&gt;&lt;td id="memberPrice"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Total&lt;/td&gt;&lt;td id="totalPrice"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="info"&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;Personal Information&lt;/legend&gt;
    &lt;label for="first_name"&gt;First Name:&lt;/label&gt;
    &lt;input type="text" id="firstname" name="first" required autofocus title="First Name" placeholder="First Name" /&gt;
    &lt;span id="first_name_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
    &lt;label for="last_name"&gt;Last Name:&lt;/label&gt;
    &lt;input type="text" id="lastname" name="last" required title="Last Name" placeholder="Last Name"/&gt;
    &lt;span id="last_name_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
  
  &lt;label for="address"&gt;Address:&lt;/label&gt;
    &lt;input type="text" id="address" name="address" required title="Address" placeholder="Address"/&gt;
  &lt;span id="address_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
    &lt;label for="city"&gt;City:&lt;/label&gt;
    &lt;input type="text" id="city" name="city" required title="City" placeholder="City"/&gt;
    &lt;span id="city_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
    &lt;label for="state"&gt;State:&lt;/label&gt;
    &lt;input type="text" id="state" maxlength="2"  name="State" required title="State" placeholder="State"/&gt;
  &lt;span id="state_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
    &lt;label for="zip_code"&gt;Zip Code:&lt;/label&gt;
    &lt;input type="text" id="zip" name="zip" required title="Zip Code" placeholder="Zip Code" pattern="\d{5}([\-]\d{4})?"/&gt;
  &lt;span id="zip_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
    &lt;label for="phone_number"&gt;Phone Number:&lt;/label&gt;
    &lt;input type="text" id="phone" name="phone" required title="Optional Phone Number 999-999-9999" placeholder="999-999-9999" pattern="\d{3}[\-]\d{3}[\-]\d{4}"/&gt;
  &lt;span id="phone_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
    &lt;label for="date_of_birth"&gt;Date of Birth:&lt;/label&gt;
    &lt;input type="date" name="date" required title="MM-DD-YYYY"/&gt;
  &lt;span id="date_error"&gt;&amp;nbsp;&lt;/span&gt;&lt;br&gt;
    &lt;label for="email"&gt;Email:&lt;/label&gt;
    &lt;input type="email" id="email" name="email" required title="Email" placeholder="Email Address"/&gt;
      &lt;span id="email_error"&gt;&amp;nbsp;&lt;/span&gt;
  &lt;br&gt;
  
  
  
  &lt;/fieldset&gt;
  &lt;br&gt;&lt;br&gt;&lt;center&gt;&lt;input type="submit" id="submit" value="Become a Member"&gt;&lt;/center&gt;
      &lt;br&gt;&lt;center&gt;&lt;input type="Reset" id="btn1" value="Reset Form"&gt;&lt;/center&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;div class="footer"&gt;
      &lt;address&gt;&lt;center&gt;
      &lt;b&gt;American InterContinental Fitness Center&lt;/b&gt; &amp;nbsp; &amp;#9728;
      1578 Perseverance Lane &amp;nbsp; &amp;#9728; &amp;nbsp;
      Simple City, IL 60001
      &amp;nbsp; &lt;br/&gt;&amp;nbsp;(630)432-1425
      &lt;/address&gt;&lt;/center&gt;
  &lt;br&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The next is the js: "Application_Library.js"</p>
  
  <pre><code>var $ = function (id) { return document.getElementById(id); }
  
  var application = function () {
  // All the different fields
  this.field = [];
  this.field["first_name"] = {};
  this.field["last_name"] = {};
  this.field["address"] = {};
  this.field["city"] = {};
  this.field["state"] = {};
  this.field["zip"] = {};
  this.field["phone"] = {};
  this.field["date"] = {};
  this.field["email"] = {};
  
  // Field messages
  this.field["state"].message = "Please use only a two letter State abbreviation.";
  this.field["zip"].message = "Please use a 5 or 9 digit Zip Code";
  this.field["phone"].message = "Please use 123-456-7890 format.";
  this.field["email"].message = "Must be a vaild email address.";
  
  // Error messages
  this.field["email"].required = "Email is required";
  this.field["confirmemail"].required = "Please confirm your email!";
  this.field["confirmemail"].noMatch = "Emails do not Match!", "email";
  this.field["first_name"].required = "First names are required.";
  this.field["last_name"].required = "Last names are required.";
  this.field["address"].required = "An Address is required";
  this.field["city"].required = "A City is required";
  this.field["state"].required = "A State is required";
  this.field["state"].isState = "State invalid";
  this.field["zip"].required = "A Zip code is required.";
  this.field["zip"].isZip = "Zip code is invalid";
  this.field["phone"].required = "A phone number is required";
  this.field["phone"].isPhone = "The phone number is invalid";
  this.field["date"].required = "Your date of birth is required";
  }
  </code></pre>