title: Form Validation?
body: <p>I'm just trying to make this check form validation. Like it shouldn't let the form submit unless everything is filled in, then it should do the total only if it works. I'm new to this and I have no idea what is going on, but it is just showing a blue box at the top of my screen by default, and then submitting/accepting regardless of the form being filled out or not. 
  HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Hands-on Project 6 - Order&lt;/title&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;section&gt;
  
  
      &lt;article&gt;
          &lt;h2&gt;Pizza Order Form&lt;/h2&gt;
          &lt;div id="errorMessage"&gt;
          &lt;/div&gt;
          &lt;form action="results.html" id="orderForm"&gt;
              &lt;input type="hidden" name="hidden" id="hidden"&gt;
              &lt;fieldset&gt;
  
  
                  &lt;legend&gt;Delivery Information&lt;/legend&gt;
  
                  &lt;label for="nameinput"&gt;Name&lt;/label&gt;
                  &lt;input type="text" id="nameinput" name="name"&gt;
  
                  &lt;label for="addrinput"&gt;Street Address&lt;/label&gt;
                  &lt;input type="text" id="addrinput" name="address"&gt;
  
                  &lt;label for="cityinput"&gt;City&lt;/label&gt;
                  &lt;input type="text" id="cityinput" name="city"&gt;
  
                  &lt;label for="emailinput"&gt;Email&lt;/label&gt;
                  &lt;input type="email" id="emailinput" name="email"&gt;
  
                  &lt;label for="phoneinput"&gt;Phone&lt;/label&gt;
                  &lt;input type="tel" id="phoneinput" name="phone"&gt;
  
              &lt;/fieldset&gt;
  
              &lt;fieldset&gt;
  
                  &lt;legend&gt;Order&lt;/legend&gt;
  
                  &lt;p&gt;
                      &lt;span class="nonLabel"&gt;What type of crust:&lt;/span&gt;
  
                      &lt;br&gt;
  
                      &lt;input type="radio" name="crust" id="thin" value="1"&gt;
                      &lt;label for="thin"&gt;Thin Crust&lt;/label&gt;
  
              &lt;input type="radio" name="crust" id="original" value="0"&gt;
                      &lt;label for="original"&gt;Original Crust&lt;/label&gt;
  
                      &lt;input type="radio" name="crust" id="thick" value="3"&gt;
                      &lt;label for="thick"&gt;Deep Dish&lt;/label&gt;
                  &lt;/p&gt;
  
                  &lt;label for="size" class="nonLabel"&gt;What size pizza:&lt;/label&gt;
  
                  &lt;select id="size" name="size"&gt;
                      &lt;option value=""&gt; &amp;nbsp; &lt;/option&gt;
                      &lt;option value="small"&gt;Small&lt;/option&gt;
                      &lt;option value="medium"&gt;Medium&lt;/option&gt;
                      &lt;option value="large"&gt;Large&lt;/option&gt;
                      &lt;option value="XL"&gt;Extra Large&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;p&gt;
                      &lt;span class="nonLabel"&gt;What topping(s):&lt;/span&gt;
  
                      &lt;br&gt;
  
      &lt;input type="checkbox" id="pepperoni" name="toppings" value="Pepperoni"&gt;
                      &lt;label for="pepperoni"&gt;Pepperoni&lt;/label&gt;
  
          &lt;input type="checkbox" id="sausage" name="toppings" value="Sausage"&gt;
                      &lt;label for="sausage"&gt;Sausage&lt;/label&gt;
  
              &lt;input type="checkbox" id="bacon" name="toppings" value="Bacon"&gt;
                      &lt;label for="bacon"&gt;Bacon&lt;/label&gt;
  
                      &lt;br&gt;
  
  &lt;input type="checkbox" id="greenpep" name="toppings" value="Green Peppers"&gt;
                      &lt;label for="greenpep"&gt;Green Peppers&lt;/label&gt;
  
          &lt;input type="checkbox" id="onion" name="toppings" value="Onions"&gt;
                      &lt;label for="onion"&gt;Onions&lt;/label&gt;
  
   &lt;input type="checkbox" id="xcheese" name="toppings" value="Extra Cheese"&gt;
                      &lt;label for="xcheese"&gt;Extra Cheese&lt;/label&gt;
                  &lt;/p&gt;
  
                  &lt;p&gt;
      &lt;label for="instructions" id="instrlabel"&gt;Special Instructions:&lt;/label&gt;
                  &lt;/p&gt;
  
  &lt;textarea id="instructions" name="instructions" rows="3" cols="60" 
  
   placeholder="Special Requests, Delivery Details"&gt;&lt;/textarea&gt;
  
              &lt;/fieldset&gt;
  
              &lt;fieldset id="submitbutton"&gt;
  
                  &lt;input type="submit" id="submitBtn" value="Add to Cart"&gt;
  
              &lt;/fieldset&gt;
  
          &lt;/form&gt;
  
      &lt;/article&gt;
  
      &lt;/section&gt;
      &lt;script&gt;
      document.getElementById("submitBtn ").addEventListener("submit",   
  
   validateForm(evt));
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>// validate required fields
  function validateForm(evt){
  if(evt.preventDefault){
      evt.preventDefault();
  }
  else {
      evt.returnValue = false;
  }
  formValidity = true;
  validateFormControls();
  }
  function validateFormControls(){
  var inputElements = document.querySelectorAll("fieldset:first-of-type
  input");
  
  var errorDiv = document.getElementById("errorMessage");
  var crustBoxes = document.getElementsByName("crust");
  var fieldsetValidity = true;
  var elementCount = inputElements.length;
  var currentElement;
  
  try {
      for(var i = 0; i &lt; elementCount; i++){
          currentElement = inputElements[i];
          if(currentElement.value === ""){
              currentElement.style.border = "3px solid #0B907A";
              currentElement.style.backgroundColor = "#FFC58A";
              fieldsetValidity = false;
          }
          else {
              currentElement.style.border = "";
              currentElement.style.backgroundColor = "";
          }
      }
      currentElement.querySelectorAll("select")[0];
          if (currentElement.selectedIndex === 0){
              currentElement.style.border = "3px solid #0B907A";
              currentElement.style.backgroundColor = "#FFC58A";
              fieldsetValidity = false;
          }
          else{
              currentElement.style.border = "";
              currentElement.style.backgroundColor = "";
          }
      if (!crustBoxes[0].checked &amp;&amp; !crustBoxes[1].checked &amp;&amp;
       !crustBoxes[2].checked){
          crustBoxes[0].style.outline = "3px solid #0B907A";
          crustBoxes[1].style.outline = "3px solid #0B907A";
          crustBoxes[2].style.outline = "3px solid #0B907A";
      }
      else {
          crustBoxes[0].style.outline = "";
          crustBoxes[1].style.outline = "";
          crustBoxes[2].style.outline = "";
      }
      if (fieldsetValidity === false){
          throw "Please complete all required fields.";
      }
      else {
          errorDiv.style.display = "none";
          errorDiv.innerHTM = "";
      }
  catch(msg){
      errorDiv.style.display = "block";
      errorDiv.innerHTML = msg;
      formValidity = false;
       }
      }
  }
  
  function orderTotal(){
  var itemTotal = 5;
  var crusts = document.getElementsByName("crust");
  var toppings = document.getElementsByName("goodnight");
  var sizes = document.querySelectorAll("select")[0];
  
  if (sizes.selectedIndex &gt; 0) {
      itemTotal += ((sizes.selectedIndex * 1) * 2);
  }
  for (var i=0; i &lt; toppings.length; i++){
      if (toppings[i].checked) {
          itemTotal += 1;
      }
  }
  for (var i=0; i &lt; crusts.length; i++){
      if (crusts[i].checked) {
          itemTotal += (crusts[i].value * 1);
      }
  }
  alert ("Your order total is $" + itemTotal);
  document.getElementById("hidden").value = itemTotal;
  }
  </code></pre>