jQuery的驗證插件和Ajax表單提交

Question

我使用jQuery驗證插件驗證後，用AJAX提交了一個簡單的multipart/form-data的形式。

我禁用提交按鈕之前提交，併成功的表單提交後啓用提交按鈕，重置所有表單字段。表單代碼正在使用Debian Box上的Chromium瀏覽器。

是否有更好/更清潔的方式來做到這一點？

<form class="aForm" enctype="multipart/form-data"> 
File To Upload: <input class="aData" type="file" name="aData" /><br/> 
Name of User: <input type="text" name="aName" class="aName" placeholder="Name" 
/><br/> 
Date: <input type="text" name="aDate" class="aDate" placeholder="Date" /></br/> 
<input type="hidden" value="5f25c045bf33ac72fcf5f8bc23b4c862d220d385" name="csrfToken" > 

<button class="aButton">Button</button> 
</form> 

---

$(document).ready(function(){ 
    $(".aForm").validate({ 
    rules: { 
     aData: { 
     required: true, 
     extension: "png|jpg", 
     }, 
     aName: "required", 
     aDate: "required" 
    }, 
    messages: { 
     aData: "No Data", 
     aName: "No Name", 
     aDate: "No Date" 
    }, 
    submitHandler: function(){ 
     $('.aButton').prop('disabled', true); 
     var formData = new FormData($('.aForm')[0]); 
     console.log(formData); 
     $.ajax({ 
     url: 'ajax.php', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: 
      function(data){ 
      alert(data); 
      $('.aForm')[0].reset(); 
      $('.aButton').prop('disabled', false); 
      }, 
     error: 
     function(jqXHR, textStatus){ 
      console.log(textStatus); 
     } 

     }); 
} 
}); 
}); 

Answer 1

上面的代碼塊在現場製作，沒有任何問題的工作。測試IE9到IE 11，Windows和Linux上的Chrome。沒有Firefox用戶。