prevent form POST redirect from happening, but still keep bootstrap validation
<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>