title: form will not display alert upon submission
body: <p>So I've created a form that needs to alert the user the form has been submitted without actually submitting the form anywhere. I've tried to set an alert upon clicking the submit button, but the alert will not show up. I'm not sure what I am doing wrong. Here is my html and .js code regarding the form.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var validName = false;
  var validEmail = false;
  var validPhone = false;
  var validtxtArea = false;
  
  
  function validate() {
    if (validName &amp;&amp; validEmail &amp;&amp; validPhone &amp;&amp; validtxtArea) {
      alert("Thank you for submitting your form!");
      console.log("Thank you for submitting your form!");
    }
  }
  
  document.getElementById("Name").addEventListener('input', function(evt) {
    var name = document.getElementById("Name").value;
    validName = (name !== '');
    validate();
  });
  
  document.getElementById("Email").addEventListener('input', function(evt) {
    var email = document.getElementById("Email").value;
    // validEmail = string.indexOf('@') !== -1 &amp;&amp; string.indexOf('.') !== -1; //
    validate();
  });
  
  document.getElementById("Phone").addEventListener('input', function(evt) {
    var phone = document.getElementById("Phone").value;
  
    validate();
  });
  
  
  document.getElementById("txtArea").addEventListener('input', function(evt) {
    var txtarea = document.getElementById("txtArea").value;
    validtxtArea = (txtarea !== '');
    validate();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="form" id="form" onsubmit="return validate()" method="post" class="text-center border border-light"&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for "Name" class="col-md-2 col-form-label"&gt;Name:&lt;/label&gt;
      &lt;div class="col-md-10"&gt;
        &lt;input type="text" id="Name" name="Name" class="form-control" required&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for "Email" class="col-md-2 col-form-label"&gt;Email:&lt;/label&gt;
      &lt;div class="col-md-10"&gt;
        &lt;input type="email" id="Email" name="Email" class="form-control" required&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for "Phone" class="col-md-2 col-form-label"&gt;Phone:&lt;/label&gt;
      &lt;div class="col-md-10"&gt;
        &lt;input type="tel" id="Phone" name="Phone" class="form-control" minlength=10 maxlength=10 required&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for "Inquiry" class="col-form-label"&gt;Reason for Inquiry:&lt;/label&gt;
      &lt;div class="col"&gt;
        &lt;select name="Reasons" id="inquiry" class="form-control"&gt;
          &lt;option value="CateringDefault"&gt;Catering&lt;/option&gt;
          &lt;option value="PrivateParty"&gt;Private Party&lt;/option&gt;
          &lt;option value="Feedback"&gt;Feedback &lt;/option&gt;
          &lt;option value="Other"&gt;Other&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for "info" id="Info" class="col-form-label"&gt;Additional Information:&lt;/label&gt;
      &lt;div class="col"&gt;
        &lt;textarea class="form-control" id="txtArea"&gt;&lt;/textarea&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;label for "Customer" class="col-form-label"&gt;Have you been to the restaurant?&lt;/label&gt;
      &lt;div class="col"&gt;
        &lt;div class="form-check form-check-inline"&gt;
          &lt;input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked /&gt;
          &lt;label class="form-check-label" for="no"&gt;No&lt;/label&gt;&lt;/div&gt;
        &lt;div class="form-check form-check-inline"&gt;
          &lt;input type="radio" id="yes" name="answer" value="YES" class="form-check-input" /&gt;
          &lt;label class="form-check-label" for="yes"&gt;Yes&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
        &lt;label for "Choices" class="col-form-label"&gt;Best days to contact you:&lt;/label&gt;
        &lt;div class="col"&gt;
          &lt;div class="form-check-inline"&gt;
            &lt;label class="form-check-label" for="M"&gt;M &lt;/label&gt;
            &lt;input type="checkbox" id="choices" name="choices" value="monday" class="form-check-input"&gt;
            &lt;label class="form-check-label" for="T"&gt;T &lt;/label&gt;
            &lt;input type="checkbox" id="choices" name="choices" value="tuesday" class="form-check-input"&gt;
            &lt;label class="form-check-label" for="W"&gt;W &lt;/label&gt;
            &lt;input type="checkbox" id="choices" name="choices" value="wednesday" class="form-check-input"&gt;
            &lt;label class="form-check-label" for="Th"&gt;Th &lt;/label&gt;
            &lt;input type="checkbox" id="choices" name="choices" value="thursday" class="form-check-input"&gt;
            &lt;label class="form-check-label" for="F"&gt;F&lt;/label&gt;
            &lt;input type="checkbox" id="choices" name="choices" value="friday" class="form-check-input"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
  
      &lt;button type="submit" id="submitButton" class="btn btn-default" onclick="validate();"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>