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用户。