不能得到JQuery验证与jQuery给ajaxForm和进度条

Question

我有这样的形式非常简单的工作：

<form id="file-form" action="student-files.php?userId=<?php echo $userId ;?>" method="post" enctype="multipart/form-data"> 

<strong>Title:</strong><br /> 
<input type="text" name="title" id="title" value=""> 
<span id="invalid-title" class="errormsg"></span> 
<br /><br /> 

<strong>File:</strong><br /> 
<input type="file" name="file1" id="file1" value="null"> 
<span id="invalid-file1" class="errormsg"></span> 
<br /><br /> 

<div class="progress"> 
    <div class="bar"></div > 
    <div class="percent">0%</div > 
</div> 
<div id="status"></div> 
<br /><br /> 

<input type="submit" name="submit" value="Add File"> 
</form> 

我试图使用验证，并给ajaxForm在同一时间，这样我可以有一个上传进度条。我在这里发现了几个类似的答案，但他们都没有为我工作。

如果我完全删除验证呼叫，那么进度条更新和文件上传。如果我保持validate调用，则进度条不会更新，但文件不会上载。

这只是进度条的视觉部分，不工作，我不能为我的生活弄明白。

这里是我的JS

<script type="text/javascript"> 

$(document).ready(function() { 

    $('#file-form').validate({ 
     rules: { 
      file1: { 
       required: true, 
       extension: "pdf", 
      }, 
     }, 
     messages: { 
      file1: "File must be PDF", 
     }, 
     onkeyup: false, 
     onfocusout: false, 
     onclick: false, 
     errorPlacement: function(error, element) { 
     error.appendTo('#invalid-' + element.attr('id')); 
    } 
    }); 

    var bar = $('.bar'); 
    var percent = $('.percent'); 
    var status = $('#status'); 


    $('#file-form').ajaxForm({ 
     beforeSubmit: function() { 
      status.empty(); 
      var percentVal = '0%'; 
      bar.width(percentVal) 
      percent.html(percentVal); 
      return $('#file-form').valid(); 
     }, 
     uploadProgress: function (event, position, total, percentComplete) { 
      var percentVal = percentComplete + '%'; 
      bar.width(percentVal) 
      percent.html(percentVal); 
     }, 
     complete: function() { 
      bar.width("100%"); 
      percent.html("100%"); 
      window.location.replace("student-files.php?userId=<?php echo $userId ;?>") 
     } 
    }); 
}); 

</script> 

任何帮助将不胜感激。

Answer 1

您只需将您的ajaxForm()函数放入jQuery Validate插件的submitHandler回调选项中即可。 As per the documentation，submitHandler是“经过验证通过Ajax提交表单的正确位置”。

更多的东西像这样...

$(document).ready(function() { 

    $('#file-form').validate({ 
     rules: { 
      file1: { 
       required: true, 
       extension: "pdf", 
      }, 
     }, 
     messages: { 
      file1: "File must be PDF", 
     }, 
     onkeyup: false, 
     onfocusout: false, 
     onclick: false, 
     errorPlacement: function(error, element) { 
      error.appendTo('#invalid-' + element.attr('id')); 
     }, 
     submitHandler: function(form) { 
      $(form).ajaxForm({ 
       // your options 
      }); 
      return false; 
     } 
    }); 

});