title: form submits even when validation fails
body: <p>I really don't understand what's going on with the <code>input[type="file"]</code> fields.</p>
  
  <pre><code>&lt;form class="container formContainer" id="needValidation" name="Info" method="post" enctype="multipart/form-data" novalidate&gt;
      &lt;div class="form-group"&gt;
          &lt;p class="labelText"&gt;Document &lt;span class="asterisk"&gt;&amp;#42;&lt;/span&gt;&lt;/p&gt;
          &lt;div id="doc"&gt;
             &lt;img src="assets/images/Document.png" /&gt;
          &lt;/div&gt;
          &lt;div class="custom-file"&gt;
             &lt;input type="file" class="custom-file-input" id="document" name="document" accept=".jpg, .png" onchange="uploadValidate(this,'doc','IDdoc','errorDivDoc');" required /&gt;
             &lt;label class="custom-file-label" for="document"&gt;Choose file...&lt;/label&gt;
             &lt;div id="errorDivDoc" class="invalid-feedback"&gt;Please upload the document&lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="text-center"&gt;
          &lt;a onclick="submitInfo();" id="submitBtn" class="btn"&gt;submit&lt;/a&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The JS</p>
  
  <pre><code>function uploadValidate(fileElement, imageDiv, bText, errorDiv) {
  var fileName = $(fileElement).val();
  var fileExt = ['jpg', 'png'];
  var inputFileExt = fileName.split('.').pop().toLowerCase();
  
  if ($.inArray(inputFileExt, fileExt) == -1) {
      alert("Only '.jpg','.png' formats are allowed.");
      return false;
  
  } else {
      var fileSize = $(fileElement)[0].files[0].size;
  
      if (fileSize &gt; 2097152) {
          alert("Maximum allowed file size is 2MB");
          return false;
  
      } else {
          var labelText = fileName.substr(12, fileName.length);
          $(fileElement).next('.custom-file-label').html(labelText);
          readURL(fileElement, imageDiv, bText);
      }
     }
  }
  
  function readURL(input, imageDiv, bText) {
  if (input.files &amp;&amp; input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
          $('#' + imageDiv + ' img').attr('src', e.target.result);
          $('#' + bText).val(e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
     }
  }
  
  function submitInfo() {
    var form = document.getElementById('needValidation');
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
      form.classList.add('was-validated');
    } else {
      submitInfoRegistration(); //to store in DB
    }
  }
  </code></pre>
  
  <p>The thing is if a file upload is greater than 2MB, it displays an alert window with the error message but the form still gets submitted when i click submit. Im assuming the <code>input[type="file"]</code> becomes validated as soon as alert is displayed but I can't seem to find out why or where. This is not my code though. I also tried <code>onclick="return submitInfo();"</code> but got the same result.
  What can I do so that the form is submitted only if a file of 2MB or less with certain extension is uploaded?</p>