title: Javascript to check for empty form elements, deny submit if empty, send alert message
body: <p>So I've been looking around at code and seeing what is possible through javascript. I have a code that currently checks if a form has empty elements and denies it to be submitted if any are empty. The thing is I tried to add an alert if the elements were empty and an alert if the elements were not empty but it did not work. I don't seem to know enough about java script to go about editing it. </p>
  
  <p>Here is the form. Ignore the weird class and div names, they are set that way because the form submits to a google doc spreadsheet.</p>
  
  <pre><code>&lt;form class="quickemailform" action="https://docs.google.com/spreadsheet/formResponse?formkey=dGp3YUxCTGtWd251ZXVfOEtwc1hhWVE6MQ&amp;amp;ifq" method="post" target="hidden_iframe" onsubmit="submitted=true;" id="ss-form" name="frm1" onsubmit="InputChecker()"&gt;
          &lt;br&gt;
          &lt;div class="errorbox-good"&gt;
              &lt;div class="ss-item ss-item-required ss-text"&gt;
                  &lt;div class="ss-form-entry"&gt;
                      &lt;label class="ss-q-title" for="entry_0"&gt;
                      &lt;font class="formtitles"&gt;FULL NAME:&lt;/font&gt;
                      &lt;/br&gt;
                      &lt;label class="ss-q-help" for="entry_0"&gt;&lt;/label&gt;
                      &lt;input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="errorbox-good"&gt;
              &lt;div class="ss-item ss-item-required ss-text"&gt;
                  &lt;div class="ss-form-entry"&gt;
                      &lt;label class="ss-q-title" for="entry_1"&gt;
                          &lt;font class="formtitles" id="compnam"&gt;COMPANY NAME:&lt;/font&gt;
                          &lt;/br&gt;
                      &lt;label class="ss-q-help" for="entry_1"&gt;&lt;/label&gt;
                      &lt;input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="errorbox-good"&gt;
              &lt;div class="ss-item ss-item-required ss-text"&gt;
                  &lt;div class="ss-form-entry"&gt;
                      &lt;label class="ss-q-title" for="entry_2"&gt;
                          &lt;font class="formtitles"  id="emailadd"&gt;EMAIL ADDRESS:&lt;/font&gt;
                          &lt;br&gt;
                      &lt;label class="ss-q-help" for="entry_2"&gt;&lt;/label&gt;
                      &lt;input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="errorbox-good"&gt;
              &lt;div class="ss-item ss-item-required ss-paragraph-text"&gt;
                  &lt;div class="ss-form-entry"&gt;
                      &lt;label class="ss-q-title" for="entry_3"&gt;
                          &lt;font class="formtitles"  id="request"&gt;Your Request:&lt;/font&gt;
                          &lt;font class="fineprint"&gt;( SUMMARIZE IMPORTANT DETAILS )&lt;/font&gt;
                          &lt;br&gt;
                      &lt;/label&gt;
                      &lt;label class="ss-q-help" for="entry_3"&gt;&lt;/label&gt;
                      &lt;textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;input type="hidden" name="pageNumber" value="0"&gt;
              &lt;input type="hidden" name="backupCache" value=""&gt;
  
          &lt;div class="ss-item ss-navigate"&gt;&lt;div class="ss-form-entry"&gt;
                  &lt;input class="submitbuttons" type="submit" name="submit" value="&amp;nbsp;" src="" border="0" onclick="myFunction()"  /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Here is the javascript that denies the form to be submitted if any fields are empty. I got this code online, I did not write it myself. It is tested and works but I want it to do more than just deny submission. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
                (function() {
          var divs = document.getElementById('ss-form').
          getElementsByTagName('div');
          var numDivs = divs.length;
          for (var j = 0; j &lt; numDivs; j++) {
          if (divs[j].className == 'errorbox-bad') {
          divs[j].lastChild.firstChild.lastChild.focus();
          return;
          }
          }
          for (var i = 0; i &lt; numDivs; i++) {
          var div = divs[i];
          if (div.className == 'ss-form-entry' &amp;&amp;
          div.firstChild &amp;&amp;
          div.firstChild.className == 'ss-q-title') {
          div.lastChild.focus();
          return;
          }
          }
          })();
      &lt;/script&gt;
  </code></pre>
  
  <p>If possible I want to know how I can add an alert for when the form is denied or accepted. Also if the form is denied I would like to have it so that I have something like</p>
  
  <pre><code>&lt;font class="asterick" div="your_name_ast"&gt;*&lt;/font&gt;   or   &lt;font class="asterick" div="company_name_ast"&gt;*&lt;/font&gt;
  </code></pre>
  
  <p>and have the asterick show up next to each empty element if the form is denied not submitted. Such as having the form check each element to be empty or not. If the script finds the element to be empty an alert would pop up saying "Form is not filled. Please look over all elements with a *." and then it would have the asterisk appear.</p>
  
  <p>Thanks to anyone that has read this far.</p>
  
  <p>EDIT: Doing some looking around more and it seems that alerts are considered bad practice. Is this true? Is there some other way I might go about letting users know if the elements are empty?</p>