title: Combine Validation (js), submit (php) and modal (bootstrap) in form
body: <p>I am using Bootstrap to create a simple contact form and would like to achieve the following when pressing the "submit" button: </p>
  
  <ul>
  <li>Validate the form fields using jQuery</li>
  <li>Submit the form if validation passes, using PHP as the processor</li>
  <li>Show a message inside of a Bootstrap modal dialog that says the form has been emailed</li>
  </ul>
  
  <p>Knowing that my PHP and JS knowledge is below average, I am glad to say that I have been able to make all items work separately, but I am not able to combine them...</p>
  
  <p>Could you give me some input?</p>
  
  <p>Validation uses :</p>
  
  <pre><code>var validator = $("#contact").validate({
    ...
  </code></pre>
  
  <p>PHP uses :</p>
  
  <pre><code>mail()
  </code></pre>
  
  <p>Both work when submitting the form with a button like this:</p>
  
  <pre><code>&lt;button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right"&gt;Send&lt;/button&gt;
  </code></pre>
  
  <p>To activate the dialog, I changed the button to:</p>
  
  <pre><code>&lt;button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal"&gt;Send&lt;/button&gt;
  </code></pre>
  
  <p>This makes the modal appear correctly, but validation and submission do not occur.</p>
  
  <p>I have found a related post : 
  <a href="https://stackoverflow.com/questions/5361873/jquery-modal-that-appears-on-form-submit">jQuery Modal that appears on form submit</a>.
  But I do not know to adapt this specifically to my case.</p>
  
  <hr>
  
  <p>I have tried to adapt what you told me and this is what I got :
  Html part :</p>
  
  <pre><code>button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal"&gt;Envoyer&lt;/button&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id="submit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 id="myModalLabel"&gt;Thanks for your mail&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;We will get back to you soon&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In my JS file : </p>
  
  <pre><code>var $validator = {};
  
  $(document).ready(function()
  {
      // validate signup form on keyup and submit
      var validator = $("#contact").validate({
         submitHandler: function(form)
          {
              //code to submit your form here
              //code to open your modal here
          errorClass:'error',
          validClass:'success',
          errorElement:'span',
          highlight: function (element, errorClass, validClass) { 
              $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
          }, 
          unhighlight: function (element, errorClass, validClass) { 
              $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
          },
          rules: {
              fname: {
                  required: true,
                  minlength: 2
              },
              name: {
                  required: true,
                  minlength: 2
              },
              email: {
                  required: true,
                  email: true
              },
              message: {
                  required: true,
                  minlength: 10
              }
          },
          messages: {
              fname: {
                  required: '&lt;span class="help-inline"&gt;First name.&lt;/span&gt;',
                  minlength: jQuery.format('&lt;span class="help-inline"&gt;2 chars&lt;/span&gt;')
              },
              name: {
                  required: '&lt;span class="help-inline"&gt;Name.&lt;/span&gt;',
                  minlength: jQuery.format('&lt;span class="help-inline"&gt;2 chars&lt;/span&gt;')
              },
              email: {
                  required: '&lt;span class="help-inline"&gt;Email.&lt;/span&gt;',
                  email: '&lt;span class="help-inline"&gt;Ex : name@exemple.com&lt;/span&gt;'
              },
              message: {
                  required: '&lt;span class="help-block"&gt;Message&lt;/span&gt;',
                  minlength: jQuery.format('&lt;span class="help-block"&gt;10 chars&lt;/span&gt;')
  
          $('form').submit(function() {
              if ($validator.numberOfInvalids() &gt; 0) {
                  $('#submit').modal('hide');
              } else {
                  $('#submit').modal('show');
              }
          }
      });
  }
  );
  </code></pre>
  
  <p>I am surely missing something but for the moment, only the modal part is executed and not the validation part or submit form part.</p>
  
  <p>Any idea what I should do to make this work?</p>