title: jquery validate need to click submit twice to submit form
body: <p>I have a form in a modal, the user has to complete the form (otherwise validation will display the required fields error messages), then click the submit input type, it does nothing, then they click it again, then it will post via ajax, and return a "thank you" message.</p>
  
  <p>I have looked around Stackoverflow and applied answers to the problem I am having but I still can't get it to work. I did remove the event.preventDefault(); from it, as well as $("#review-form").submit(function(event) { and the form submits like it should after clicking the submit input once, but it doesn't post to the database.</p>
  
  <p>Below is the jQuery for #review-form</p>
  
  <pre><code>$("#review-form").validate({
      submitHandler: function () {
          $("#review-form").submit(function (event) {
              var rating = $(this).find('input[name=rating]');
              // var rating = $(this).find('input[name=rating]').val();
              var review = $(this).find('textarea[name=review]');
              var form_settings = $(this).find('input[name=form_settings]');
              var xid = $(this).find('input[name=XID]');
              var entry_id = $(this).find('input[name=entry_id]');
              var entry_type = $(this).find('input[name=entry_type]');
              var site_id = $(this).find('input[name=site_id]');
              var first_name = $(this).find('input[name=first_name]');
              var middle_initial = $(this).find('input[name=middle_initial]');
  
              $.ajax({
                  url: $("#review-form").attr("action"), //your server side script
                  data: $(this).serialize(),
                  type: 'POST',
                  success: function (data) {
                      //$('#response').append('&lt;li&gt;' + data + '&lt;/li&gt;');
                      $('#review-form').hide();
                      $('#review-form-response').html("&lt;h3 style='text-align:center;'&gt;Thank you, your review was submitted!&lt;/h3&gt;");
                  },
                  error: function (jxhr, msg, err) {
                      $('#response').append('&lt;li style="color:red"&gt;' + msg + '&lt;/li&gt;');
                  }
              });
              event.preventDefault();
          });
      }
  });
  </code></pre>
  
  <p>UPDATE: I removed the $("#review-form").submit(function (event) { }); and I changed the $(this).find ... and retrieved by specifying the form's id of #form-review, then past thru the data parameter. I commented out all the individual variables and just passing $(this).serialize() into the data parameter and that did not work.</p>
  
  <p>The below code works in chrome and firefox, but in firefox, it closes the modal and redirects to the domain's homepage, it should keep the modal open with a thank you msg, like it does in chrome:</p>
  
  <pre><code>$("#review-form").validate({
      submitHandler: function() {
  
           $.ajax({
               url: $("#review-form").attr("action"), //your server side script
               data: $("#review-form").serialize(),                
               type: 'POST',
               success: function (data) {
                   $('#review-form').hide();
                   $('#review-form-response').html("&lt;h3 style='text-align:center;'&gt;Thank you, your review was submitted!&lt;/h3&gt;");
               },
               error: function (jxhr, msg, err) {
                   $('#response').append('&lt;li style="color:red"&gt;' + msg + '&lt;/li&gt;');
               }
           });
  
          event.preventDefault(); 
      }
  });
  </code></pre>
  
  <p>Final working product:</p>
  
  <pre><code>$("#review-form").validate({
      submitHandler: function() {
  
           $.ajax({
               url: $("#review-form").attr("action"),
               data: $("#review-form").serialize(),
               type: 'POST',
               success: function (data) {
                   $('#review-form').hide();
                   $('#review-form-response').html("&lt;h3 style='text-align:center;'&gt;Thank you, your review was submitted!&lt;/h3&gt;");
               },
               error: function (jxhr, msg, err) {
                   $('#response').append('&lt;li style="color:red"&gt;' + msg + '&lt;/li&gt;');
               }
           });
      }
  });
  </code></pre>