title: JQuery form validation Required failing in Chrome browser
body: <p>I'm using JQuery to validate a form. The form has two fields. One is text, the other a file. The required method is used for each field. When submit is clicked without selecting a name or file the form submits without these two values.</p>
  
  <p>However, this works on desktop Firefox 56.0, on my phone's Chrome 63.0.03239.11 but not on my desktop Chrome Version 63.0.3239.108 (Official Build) (64-bit).
  Also, I note that required validation works if I'm not uploading a file in a form and just using <code>$(form).serialize()</code> to capture the form text fields. Should I submit a Chrome bug report about this?</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script&gt; var myPath = "/timelines/post_photo.php";&lt;/script&gt;
  
  &lt;form id="foo"&gt;                               
      &lt;div class="form-group"&gt;
      &lt;!-- Child id --&gt;
      &lt;label for="name"&gt;Child's name:&lt;/label&gt;
      &lt;select multiple class="form-control" name="child" id="name"&gt;
          &lt;option style="display:none" disabled selected value&gt;&lt;/option&gt;
          &lt;option value="1"&gt; Jim Bergin &lt;/option&gt;
          &lt;option value="2"&gt; Harry Potter &lt;/option&gt;
          &lt;option value="3"&gt; John Carpenter &lt;/option&gt;
          &lt;option value="4"&gt; Johnny Ive &lt;/option&gt;
          &lt;option value="5"&gt; Steve Jobs &lt;/option&gt;
      &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;!-- Upload Photo --&gt;
      &lt;div class="form-group"&gt;
      &lt;label for="photo"&gt;Upload photo:&lt;/label&gt;
      &lt;input type="file" class="form-control-file" name="photo" id="photo" /&gt;                                
      &lt;img src="/timelines/images/loading.gif" class="img-fluid" id="loading-indicator" style="display:none" /&gt;
      &lt;input type="submit" value="Submit" class="btn btn-primary"&gt;
      &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>Validation Script</p>
  
  <pre><code>$( document ).ready(function() {
      var request;
  
      $("#foo").validate({
              //Our required fields
              rules: {
                      child: {
                              required: true
                      },
                      photo: {
                              required: true
                      }
              },
  
              submitHandler: function(form) {
                      $('#loading-indicator').show();
  
                      //Create variable to hold the form data
                      var fd = new FormData($(this)[0]);                        
  
                      //Create request function
                      request = $.ajax({
                              url: myPath,
                              type: "POST",
                              enctype: 'multipart/form-data',
                              data: fd,
                              processData: false,
                              contentType: false,
                              cache: false
                      });
  
                      request.done(function(response) {
                          // Show and fade out success message                        
                      });
  
                      request.fail(function (response) {
                          // Show an error message                                
                      });
              }
      });
  });
  </code></pre>