title: jQuery form validation - Popup on success
body: <p>I am trying to get a popup to come up when the user clicks "Submit," and everything is valid. This is what I have so far:</p>
  
  <pre><code>$(document).ready(function() {
      $("#aForm").validate({
          debug: false,
          errorPlacement: function(error, element) {
              error.insertBefore(element);
          },
          submitHandler: function(form) {
              $(".success-overlay").show();
              $(".success-message").show();
          },
          rules: {
              firstName: {
                  required: true,
                  minLength: 1,
                  messages: {
                      required: "Please enter your first name",
                      minLength: "Please enter a valid first name"
                  }
              },
              lastName: {
                  required: true,
                  minLength: 1,
                  messages: {
                      required: "Please enter your last name",
                      minLength: "Please enter a valid last name"
                  }
              },
              email: {
                  required: true,
                  email: true,
                  messages: {
                      required: "Please enter your email address",
                      minLength: "Please enter a valid email address"
                  }
              }
          }
      });
  });
  </code></pre>
  
  <p>... but all that happens is it reloads the page and sends me back to the top of the current page. Any advice? Here's the accompanying HTML:</p>
  
  <pre><code>&lt;form class="aForm" id="aForm" method="" action=""&gt;
      &lt;div class="personal-info"&gt;
          &lt;div class="ie-left"&gt;&lt;label class="hide" for="firstName"&gt;First name&lt;/label&gt;&lt;input type="text" name="firstName" id="firstName" placeholder="First name"&gt; &lt;span&gt;*&lt;/span&gt;&lt;/div&gt;
          &lt;div class="ie-middle"&gt;&lt;label class="hide" for="lastName"&gt;Last name&lt;/label&gt;&lt;input type="text" name="lastName" id="lastName" placeholder="Last name"&gt; &lt;span&gt;*&lt;/span&gt;&lt;/div&gt;
          &lt;div class="ie-right"&gt;&lt;label class="hide" for="email"&gt;Email address&lt;/label&gt;&lt;input type="email" name="email" id="email" placeholder="Email address"&gt; &lt;span&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;p class="required-fields"&gt;* Required fields&lt;/p&gt;
      &lt;div class="submit-button"&gt;&lt;input type="submit" value="Register for Updates"&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  &lt;div class="success-overlay"&gt;&lt;/div&gt;
  &lt;div class="success-message"&gt;
      &lt;span&gt;X&lt;/span&gt;
      &lt;h1&gt;Thank you!&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>