需要点击两次表单提交（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"=== 
     } 

    }); 
});