title: Can't prevent file upload on failed validation using jQuery Form plugin
body: <p>Here's my form:</p>
  
  <pre><code>&lt;form id="frmUpload" action="../scripts/upload.php" method="post" enctype="multipart/form-data"&gt;
      &lt;div id="sermonInfo"&gt;
          File: &lt;input type="file" id="uploadedFile" name="uploadedFile" class="error"&gt;&lt;br&gt;
          &lt;br&gt;
          Title: &lt;input type="text" id="title" name="sermonTitle" size="35" maxlength="100"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;div id="uploadInfo"&gt;
      &lt;div class="progress"&gt;
          &lt;div class="statusBar" style="width: 0%;"&gt;&lt;/div&gt;
          &lt;div class="percent"&gt;0%&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="status"&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;div id="required"&gt;Only mp3 files are allowed!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the JS I'm using:</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          /*
           * Upload
           */
          // Reset validation and progress elements
          var formValid = true,
              percentVal = '0%';
          $('#uploadedFile, #title').removeClass('error');
          $('#status, #required').empty().removeClass();
          $('.statusBar').width(percentVal)
          $('.percent').html(percentVal);
  
          $('form').ajaxForm({
              beforeSend: function(e) {
  
                  if (!ValidateUploadForm()) {
                      formValid = false;
                      console.log('validateuploadform returned false');
                  } else {
                      console.log('validateuploadform returned true');
                      formValid = true;
                  }
  
                  console.log('in beforeSend. formValid: ' + formValid);
  
                  if (!formValid) {
                      return false;
                  }
  
              },
              uploadProgress: function(event, position, total, percentComplete) {
                  console.log('in uploadProgress function. formValid: ' + formValid);
                  if (formValid) {
                      var percentVal = percentComplete + '%';
                      $('.statusBar').width(percentVal)
                      $('.percent').html(percentVal);    
                  }
              },
              complete: function(xhr) {
                  console.log('in complete function. formValid: ' + formValid);
                  if (formValid) {
                      console.log('xhr.responseText: ' + xhr.responseText);
                      console.log('formValid: ' + formValid);
  
                      if (xhr.responseText === 'success') {
                          $('.statusBar').width('100%');
                          $('.percent').html('100%');
                          $('#status').html('Successfully uploaded the file.').addClass('successUpload');
  
                          // Clear the form
                          ClearForm();
  
                      } else if (xhr.responseText === 'fail') {
                          $('#status').html('There was a problem uploading the file. Try again.&lt;br&gt;If the problem persists, contact your system administrator.').addClass('errorUpload');
                      }
                  }
              }
          }); // End Upload Status Bar
      });
  
      function ValidateUploadForm() {
          // Reset errors and clear message
          $('#uploadedFile, #title').removeClass('error');
          $('#required').empty();
  
          var result = true;
              title = $('#title').val(),
              fileName = $('#uploadedFile').val();
              extension = $('#uploadedFile').val().split('.').pop();
  
          if (fileName !== '' &amp;&amp; extension !== 'mp3') {
              $('#uploadedFile').addClass('error');
              $('#required').html('Only mp3 files are allowed!');
              return false;
          } else if (fileName === '') {
              result = false;
          } else if (title === '') {
              $('#title').addClass('error');
              result = false;
          }
  
          console.log('returning ' + result + ' from the validateuploadform function');
  
          if (!result) { $('#required').html('All fields are required.'); }
              return result;
          }
  
          function ClearForm() {
              $('#uploadedFile, #title').val('').removeClass();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see, I'm using console output the keep an eye on what's going on.</p>
  
  <p>My problem is, if a file is selected, the file still uploads, whether formValid (in beforeSend) is true or false.</p>
  
  <p>I've tried adding preventDefault before <code>return false;</code>. I've also tried clearing the file input in the <code>if (!formValid) {}</code> block. As you can see, I've wrapped the <code>uploadProgress</code> and <code>complete</code> functions to check if formValid is false. If the console output in uploadProgress shows formValid to be <strong>false</strong>, the file still uploads.</p>
  
  <p>What am I missing here? How can I prevent the file upload if the validation fails?</p>