title: jQuery validator not working for file input type
body: <p>I am trying to implemenet validation for file input type using jQuery validator plugin.
  The file input type should accept only images with .jpeg, .jpg &amp; .png extension &amp; file size should not be greater than 1MB.
  Validation for other input fields work without any issues. Required validation works for file input type.</p>
  
  <p>What could be the issue?</p>
  
  <p>Javascript</p>
  
  <pre><code>jQuery.validator.addMethod('filesize', function(value, element, param) {
     return this.optional(element) || (element.files[0].size &lt;= param) 
  });    
  
  $('#form').validate({
          rules: {
              firstname: {
                  minlength: 6,
                  required: true
              },
              lastname: {
                  minlength: 6,
                  required: true
              },
              file: {
                  required: true, 
                  accept: "png|jpeg|jpg",
                  filesize: 1048576 
              }
          },
          messages: 
             { 
              file: "File must be JPEG or PNG, less than 1MB" 
             },
          highlight: function(element) {
              $(element).closest('.form-group').addClass('has-error');
          },
          unhighlight: function(element) {
              $(element).closest('.form-group').removeClass('has-error');
          },
          errorElement: 'span',
          errorClass: 'help-block',
          errorPlacement: function(error, element) {
              if(element.parent('.input-group').length) {
                  error.insertAfter(element.parent());
              } else {
                  error.insertAfter(element);
              }
          }
      });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;form id="form"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="firstname"&gt;First:&lt;/label&gt;
          &lt;div class="input-group"&gt;
              &lt;input class="form-control"  name="firstname" type="text" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="lastname"&gt;Last:&lt;/label&gt;
          &lt;div class="input-group"&gt;
              &lt;input class="form-control" name="lastname" type="text" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
          &lt;label class="control-label" for="file"&gt;Image:&lt;/label&gt;
          &lt;div class="input-group"&gt;
              &lt;input  id="file" name="file" type="file" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
          &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/iamsajeev/mv8w3m0c/" rel="nofollow">Fiddle that doesn't give desired result</a></p>