需要點擊兩次表單提交（AJAX）

Question

我創建了一個表單，在提交時不需要頁面刷新幷包含驗證。我的問題是我必須點擊提交按鈕兩次發送表單。我猜這個問題有關：

submitHandler: function(form) { 
$('.mainform').submit(function(){ 

我的問題是我只是不能找出更好的方法來做到這一點。我已經包括下面的完整JS：

$(document).ready(function() { 
    $('<i class="fa-check"></i><i class="fa-exclamation"></i>').appendTo($('.mainform section')); 

    $(".mainform").validate({ 
     // Rules for form validation 
     rules: { 
      firstname: { 
       required: true 
      }, 

      lastname: { 
       required: true 
      }, 

      email: { 
       required: true, 
       email: true 
      }, 

      phone: { 
       required: true, 
       minlength: 10 

      }, 

      services: { 
       required: true 

      }, 

      message: { 
       required: true, 
       minlength: 10 
      }, 

      human: { 
       required: true, 
       range: [4, 4] 
      } 
     }, 

     // Messages for form validation 
     messages: { 
      firstname: { 
       required: 'Please enter your first name' 
      }, 

      lastname: { 
       required: 'Please enter your last name' 
      }, 

      email: { 
       required: 'Please enter your email address', 
       email: 'Please enter a VALID email address' 
      }, 

      phone: { 
       required: 'Please enter your phone number' 
      }, 

      services: { 
       required: 'Please enter the services you are looking for' 
      }, 

      message: { 
       required: 'Please enter your message' 
      }, 

      human: { 
       required: 'Please answer security question', 
       range: 'That is incorrect' 
      } 
     }, 

     // Do not change code below 
     errorPlacement: function(error, element) { 
      error.appendTo(element.parent()); 
     }, 

     submitHandler: function(form) { 
      $('.mainform').submit(function(){ 

       $.ajax({ 
        url: 'toAction.php', 
        data: $(this).serialize(), 
        type: 'POST', 
        success: function(data) { 
         console.log(data); 
         $("#success").show().fadeOut(15000); //=== Show Success Message== 
        }, 
        error: function(data) { 
         $("#error").show().fadeOut(15000); //===Show Error Message==== 
        } 
       }); 
       e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"=== 
      }); 
     } 

    }); 

}); 

Answer 1

在提交處理程序，你應該只使用一個Ajax請求保存數據 - 在submitHandler是當被提交表單，所以沒有必要註冊另一個叫提交處理器。也有防止默認動作你可以從提交處理

$(document).ready(function() { 
    $('<i class="fa-check"></i><i class="fa-exclamation"></i>').appendTo($('.mainform section')); 

    $(".mainform").validate({ 
     // Rules for form validation 
     rules: { 
      firstname: { 
       required: true 
      }, 
      lastname: { 
       required: true 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      phone: { 
       required: true, 
       minlength: 10 

      }, 
      services: { 
       required: true 

      }, 
      message: { 
       required: true, 
       minlength: 10 
      }, 
      human: { 
       required: true, 
       range: [4, 4] 
      } 
     }, 

     // Messages for form validation 
     messages: { 
      firstname: { 
       required: 'Please enter your first name' 
      }, 
      lastname: { 
       required: 'Please enter your last name' 
      }, 
      email: { 
       required: 'Please enter your email address', 
       email: 'Please enter a VALID email address' 
      }, 
      phone: { 
       required: 'Please enter your phone number' 
      }, 
      services: { 
       required: 'Please enter the services you are looking for' 
      }, 
      message: { 
       required: 'Please enter your message' 
      }, 
      human: { 
       required: 'Please answer security question', 
       range: 'That is incorrect' 
      } 
     }, 
     // Do not change code below 
     errorPlacement: function (error, element) { 
      error.appendTo(element.parent()); 
     }, 
     submitHandler: function (form) { 
      $.ajax({ 
       url: 'toAction.php', 
       data: $(form).serialize(), 
       type: 'POST', 
       success: function (data) { 
        console.log(data); 
        $("#success").show().fadeOut(15000); //=== Show Success Message== 
       }, 
       error: function (data) { 
        $("#error").show().fadeOut(15000); //===Show Error Message==== 
       } 
      }); 
      return false; //=== To Avoid Page Refresh and Fire the Event "Click"=== 
     } 

    }); 
});