Question

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

我在提交前禁用提交按钮，成功提交表单后启用提交按钮并重置所有表单字段。表单代码正在Debian Box上的Chromium Browser上运行。

有更好/更清洁的方法吗？

<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，Chrome和Windows和Linux。没有Firefox用户。

jQuery Validation插件和ajax表单提交

1 个答案: