title: Jquery validation on fileinput bootstrap plugin
body: <p>I'm using <a href="https://github.com/kartik-v/bootstrap-fileinput" rel="nofollow">Fileinput Bootstrap</a> for <code>file</code> input fields. Following is my code:-</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'&gt;
  &lt;input id="input-upload-img2" type="file" class="file" data-preview-file-type="text" name="img2" accept='image/*,video/*'&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script&gt;
      $('#input-upload-img1').fileinput({
          initialPreview: [
              "&lt;img src='img1' class='file-preview-image' alt='Desert'&gt;",
          ]
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So, now I've an initial preview on one of my input field having id <code>input-upload-img1</code> and no preview on the other input field.</p>
  
  <p>Now I apply jQuery validation of the input field</p>
  
  <pre><code>img1: {
      require_from_group: [1, '.file'],
      accept: "image/*"
  },
  img2: {
      require_from_group: [1, '.file'],
      accept: "image/*"
  }
  </code></pre>
  
  <p>But, when I submit the form, it still shows the error of saying <code>Atleast 1 field is required</code>. Why is it happening when I've already provided an image in the first input box? Also, If I browse separately again. it will work.</p>
  
  <p>Why jQuery validation is showing error when initial preview field has already been provided.</p>
  
  <p><strong>Following is my dummy code:-</strong></p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/css/fileinput.min.css"&gt;&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form&gt;
          &lt;input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*'&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/js/fileinput.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $("#input-upload-img1").fileinput({
          initialPreview: [
              "&lt;img src='http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg' class='file-preview-image' width=20% height=20%&gt;"
          ]
      });
  
      $('form').validate({
          rules: {
              img1: {
                  require_from_group: [1, '.file'],
                  accept: "image/*,video/*",
                  filesize: 100000000
              }
          }
      })
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, there's initially an image in the input field. But when I submit the form, it returns an error saying <code>Please fill at least 1 of these field</code>, since there's no file selected. How can I overcome this?</p>
  
  <p>Here's the <a href="https://jsfiddle.net/4ghnx7uo/" rel="nofollow">jsfiddle</a>. But it somehow doesnt display the initial preview of the image, hence I recommend you to copy-paste this code and run it on your own system.</p>