title: prevent form POST redirect from happening, but still keep bootstrap validation
body: <p>So I have a form that I want to submit via AJAX. I use bootstrap, bootstrap material design, jquery and PHP codeigniter on the back-end.</p>
  
  <p>Here is my problem: I want the html5/bootstrap validation to work, but I want the POST request to be sent via AJAX and not via redirect. Hence <code>event.preventDefault()</code> isn't an option... or so I think.</p>
  
  <p>Any help is apreciated, thanks!</p>
  
  <p>Here is my JS</p>
  
  <pre><code>$(document).ready(function(){
     $.material.init();
  
    $(".submit_form").click(function(event){
      if ($('.reservation_form')[0].checkValidity()){
        $('.app_loading').fadeIn('fast');
        var input=$('.reservation_form :input');
        var values = {};
        var i=0;
        console.log(input);
        input.each(function() {
          if (i==5){
            values[i] = $(this).val();
          }
          else{
            values[i] = $(this).val();
            i++;
          }
        });
        console.log(values);
        jQuery.ajax({
          type: "POST",
          url: "https://code-igniter-blog-asergey91.c9users.io/index.php/reservation/make_reservation",
          dataType: 'json',
          data: {
            email: values[0],
            first_name: values[1],
            last_name: values[2],
            tel: values[3],
            size: values[4],
            start: values[5],
          },
          success: function(){
  
          },
          fail: function(){
            $('.app_loading').fadeOut('fast');
            $('.error_capacity').fadeIn('fast');
          }
        });
      }
      else{
        $('.app_loading').fadeIn('fast');
        $('.app_loading').fadeOut('fast');
      }
    });
  });
  </code></pre>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div class='container-fluid'&gt;
    &lt;div class='row'&gt;
      &lt;div class='col-xs-10 col-xs-offset-1  col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4'&gt;
        &lt;div class='well customer_input'&gt;
          &lt;form class="form-horizontal reservation_form"&gt;
            &lt;fieldset&gt;
              &lt;legend class='text-center'&gt;Make a Reservation&lt;/legend&gt;
              &lt;div class='text-center'&gt;Opening Hours:&lt;br&gt;Mon-Sat&lt;br&gt;8:00 AM - 8:00 PM&lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputEmail" class="col-md-2 control-label"&gt;Email&lt;/label&gt;
                &lt;div class="col-md-10"&gt;
                  &lt;input type="email" class="form-control" id="inputEmail" placeholder="Email" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputFirstName" class="col-md-2 control-label"&gt;First Name&lt;/label&gt;
                &lt;div class="col-md-10"&gt;
                  &lt;input type="text" class="form-control" id="inputFirstName" placeholder="First Name" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputLastName" class="col-md-2 control-label"&gt;Last Name&lt;/label&gt;
                &lt;div class="col-md-10"&gt;
                  &lt;input type="text" class="form-control" id="inputLastName" placeholder="Last Name" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputTel" class="col-md-2 control-label"&gt;Tel(+32)&lt;/label&gt;
                &lt;div class="col-md-10"&gt;
                  &lt;input type="tel" class="form-control" id="inputTel" placeholder="Telephone Number" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputParty" class="col-md-2 control-label"&gt;Party Size&lt;/label&gt;
  
                &lt;div class="col-md-10"&gt;
                  &lt;select id="inputParty" class="form-control" required&gt;
                    &lt;option&gt;1&lt;/option&gt;
                    &lt;option&gt;2&lt;/option&gt;
                    &lt;option&gt;3&lt;/option&gt;
                    &lt;option&gt;4&lt;/option&gt;
                    &lt;option&gt;5&lt;/option&gt;
                    &lt;option&gt;6&lt;/option&gt;
                    &lt;option&gt;7&lt;/option&gt;
                    &lt;option&gt;8&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputTime" class="col-md-2 control-label"&gt;Date+Time&lt;/label&gt;
                &lt;div class="col-md-10"&gt;
                  &lt;input type="datetime-local" class="form-control" id="inputTime" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='app_loading text-center'&gt;
                &lt;br&gt;
                &lt;img src='../../assets/img/loading-dots.gif'&gt;
              &lt;/div&gt;
              &lt;div class="form-group app_submit"&gt;
                &lt;div class='text-center'&gt;
                  &lt;button type="submit" class="btn btn-primary btn-raised submit_form"&gt;Submit&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/fieldset&gt;
          &lt;/form&gt;
          &lt;div class="alert alert-dismissible alert-danger error_capacity"&gt;
            &lt;button type="button" class="close" data-dismiss="alert"&gt;×&lt;/button&gt;
            Sorry, this is an error message
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='row'&gt;
      &lt;div class='col-xs-8 col-xs-offset-2  col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4'&gt;
        &lt;div class='well customer_success'&gt;
          &lt;h1 class='text-center'&gt;&lt;span class='glyphicon glyphicon-ok'&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;Your Reservation Has Been Made&lt;br&gt;&lt;br&gt;Thank You&lt;br&gt;&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>