jquery - 即使验证失败，表单也会提交

Question

我真的不明白 input[type="file"] 字段是怎么回事。

<form class="container formContainer" id="needValidation" name="Info" method="post" enctype="multipart/form-data" novalidate>
    <div class="form-group">
        <p class="labelText">Document <span class="asterisk">&#42;</span></p>
        <div id="doc">
           <img src="assets/images/Document.png" />
        </div>
        <div class="custom-file">
           <input type="file" class="custom-file-input" id="document" name="document" accept=".jpg, .png" onchange="uploadValidate(this,'doc','IDdoc','errorDivDoc');" required />
           <label class="custom-file-label" for="document">Choose file...</label>
           <div id="errorDivDoc" class="invalid-feedback">Please upload the document</div>
       </div>
    </div>
    <div class="text-center">
        <a onclick="submitInfo();" id="submitBtn" class="btn">submit</a>
    </div>
</form>

JS

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 > 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 && 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
  }
}

问题是，如果上传的文件大于 2MB，它会显示一个带有错误消息的警告窗口，但当我单击“提交”时，表单仍然会被提交。我假设 input[type="file"] 在显示警报后立即生效，但我似乎无法找出原因或位置。这不是我的代码。我也尝试了 onclick="return submitInfo();" 但得到了相同的结果。我该怎么做才能仅在上传具有特定扩展名的 2MB 或更小文件时才提交表单？

Answer 1

由于您使用的是 <a>元素代替提交按钮，你可以简单地给它一个 href那不会去任何地方。

<a href="#" onclick="submitInfo()" id="submitBtn" class="btn">submit</a>

那么就没有必要调用event.preventDefault()了在submitInfo()功能。

如果你需要在函数中引用事件，你必须将它作为参数传递，它不是全局变量。

<a href="#" onclick="submitInfo(event)" id="submitBtn" class="btn">submit</a>

function submitInfo(event) {
    ...
}