防止表單 POST 重定向發生，但仍保持引導驗證

Question

所以我有一個表單，我想通過 AJAX 提交。 我在后端使用 bootstrap、bootstrap material design、jquery 和 PHP codeigniter。

這是我的問題：我希望 html5/bootstrap 驗證工作，但我希望通過 AJAX 而不是通過重定向發送 POST 請求。 因此event.preventDefault()不是一個選項......或者我認為。

感謝任何幫助，謝謝！

這是我的 JS

$(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');
    }
  });
});

這是我的 HTML

<div class='container-fluid'>
  <div class='row'>
    <div class='col-xs-10 col-xs-offset-1  col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4'>
      <div class='well customer_input'>
        <form class="form-horizontal reservation_form">
          <fieldset>
            <legend class='text-center'>Make a Reservation</legend>
            <div class='text-center'>Opening Hours:<br>Mon-Sat<br>8:00 AM - 8:00 PM</div>
            <div class="form-group">
              <label for="inputEmail" class="col-md-2 control-label">Email</label>
              <div class="col-md-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
              </div>
            </div>
            <div class="form-group">
              <label for="inputFirstName" class="col-md-2 control-label">First Name</label>
              <div class="col-md-10">
                <input type="text" class="form-control" id="inputFirstName" placeholder="First Name" required>
              </div>
            </div>
            <div class="form-group">
              <label for="inputLastName" class="col-md-2 control-label">Last Name</label>
              <div class="col-md-10">
                <input type="text" class="form-control" id="inputLastName" placeholder="Last Name" required>
              </div>
            </div>
            <div class="form-group">
              <label for="inputTel" class="col-md-2 control-label">Tel(+32)</label>
              <div class="col-md-10">
                <input type="tel" class="form-control" id="inputTel" placeholder="Telephone Number" required>
              </div>
            </div>
            <div class="form-group">
              <label for="inputParty" class="col-md-2 control-label">Party Size</label>

              <div class="col-md-10">
                <select id="inputParty" class="form-control" required>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="inputTime" class="col-md-2 control-label">Date+Time</label>
              <div class="col-md-10">
                <input type="datetime-local" class="form-control" id="inputTime" required>
              </div>
            </div>
            <div class='app_loading text-center'>
              <br>
              <img src='../../assets/img/loading-dots.gif'>
            </div>
            <div class="form-group app_submit">
              <div class='text-center'>
                <button type="submit" class="btn btn-primary btn-raised submit_form">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
        <div class="alert alert-dismissible alert-danger error_capacity">
          <button type="button" class="close" data-dismiss="alert">×</button>
          Sorry, this is an error message
        </div>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-8 col-xs-offset-2  col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4'>
      <div class='well customer_success'>
        <h1 class='text-center'><span class='glyphicon glyphicon-ok'></span><br><br>Your Reservation Has Been Made<br><br>Thank You<br></h1>
      </div>
    </div>
  </div>
</div>

Answer 1

在這種情況下， Jquery 表單將很有用。 這將使用 Ajax 提交您的表單而無需重定向。

示例代碼：

    // prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 

        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

    // bind to the form's submit event 
    $('#myForm2').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 

        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 

    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 

    alert('About to submit: \n\n' + queryString); 

    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
} 

// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
} 

Answer 2

嘗試使用

$( "form" ).submit(function( event ) {
   event.preventDefault();
});

請記住，您不必監聽對任何表單提交按鈕的點擊，因為表單中的任何按鈕都會自動提交，因為這是其默認行為

Answer 3

嘗試添加

返回假；

$(".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');
}

 return false;