javascript - Can't get jquery validate to work with jquery ajaxform and progress bar -

i have simple form:

<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> 

i'm trying use validate , ajaxform @ same time can have upload progress bar. have found several answers on here similar none of them working me.

if remove validate call progress bar updates , file uploads. if keep validate call in progress bar not update file upload.

it's visual part of progress bar that's not working, can't life of me figure out.

here's js

<script type="text/javascript">  $(document).ready(function () {      $('#file-form').validate({         rules: {             file1: {                 required: true,                 extension: "pdf",             },         },         messages: {             file1: "file must 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> 

any appreciated.

you need put ajaxform() function inside of submithandler callback option of jquery validate plugin. as per documentation, submithandler "right place submit form via ajax after validated".

something more this...

$(document).ready(function () {      $('#file-form').validate({         rules: {             file1: {                 required: true,                 extension: "pdf",             },         },         messages: {             file1: "file must pdf",         },         onkeyup: false,         onfocusout: false,         onclick: false,         errorplacement: function(error, element) {             error.appendto('#invalid-' + element.attr('id'));         },         submithandler: function(form) {             $(form).ajaxform({                 // options             });             return false;         }     });  });