jQuery Validation 插件和 ajax 表单提交

Question

我有一个简单的 multipart/form-data 表单，在使用 jQuery Validation Plugin 验证后使用 ajax 提交。

我在提交之前禁用提交按钮，在成功提交表单后启用提交按钮并重置所有表单字段。表单代码在 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 用户。