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) {
    ...
}

Answer 2

取自MDN

如果元素的子控件受约束验证并满足这些约束，则返回true;如果某些控件不满足其约束，则返回false。

form.checkValidity()不会调用您的uploadValidate()函数，因为后者不是约束。

您需要以某种方式通知您的提交内容是否有效。要做到这一点，你可以设置一个布尔标志，例如验证过程中isValidUpload，除了form.checkValidity()之外，还要在提交过程中检查标记。

// assuming the file is required based off your HTML
var isValidUpload = false;

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.");
        isValidUpload = false;
        return false;
    }
    var fileSize = $(fileElement)[0].files[0].size;
    if (fileSize > 2097152) {
        alert("Maximum allowed file size is 2MB");
        isValidUpload = false;
        return false;
    }

    var labelText = fileName.substr(12, fileName.length);
    $(fileElement).next('.custom-file-label').html(labelText);
    readURL(fileElement, imageDiv, bText);
    isValidUpload = true;
}

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() || !isValidUpload) {
        // where did you get event from?
        //event.preventDefault();
        //event.stopPropagation();
        form.classList.add('was-validated');
    } else {
        submitInfoRegistration(); //to store in DB
    }
    // prevent link from firing
    return false;
}

另外，在return中添加onclick。

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

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

2 个答案: