文件上传验证不通过时表单仍提交的解决方法咨询

我明白你的问题了——虽然uploadValidate在文件不符合要求时弹出了提示，但表单还是会继续提交，对吧？这是因为当前的验证逻辑只在文件选择时触发，并没有在提交环节拦截不符合条件的情况，而且form.checkValidity()只会检查HTML5原生的验证规则（比如必填），不会包含你自定义的文件大小和格式校验。

下面是具体的修复方案：

步骤1：调整uploadValidate函数，明确返回验证结果 #

我们需要让这个函数清晰地返回文件是否验证通过，同时优化错误提示的显示逻辑：

function uploadValidate(fileElement, imageDiv, bText, errorDiv) {
    var fileName = $(fileElement).val();
    // 未选择文件时返回false（HTML5的required会处理必填提示）
    if (!fileName) return false;
    
    var fileExt = ['jpg', 'png'];
    var inputFileExt = fileName.split('.').pop().toLowerCase();
    
    if ($.inArray(inputFileExt, fileExt) === -1) {
        alert("Only '.jpg','.png' formats are allowed.");
        $('#' + errorDiv).text("Only '.jpg','.png' formats are allowed.").show();
        return false;
    } 
    
    var fileSize = $(fileElement)[0].files[0].size;
    // 2MB = 2*1024*1024 = 2097152 bytes
    if (fileSize > 2097152) {
        alert("Maximum allowed file size is 2MB");
        $('#' + errorDiv).text("Maximum allowed file size is 2MB").show();
        return false;
    } 
    
    // 验证通过，隐藏错误提示并更新预览
    $('#' + errorDiv).hide();
    var labelText = fileName.substr(12, fileName.length);
    $(fileElement).next('.custom-file-label').html(labelText);
    readURL(fileElement, imageDiv, bText);
    return true;
}

步骤2：修改submitInfo函数，提交前强制验证文件 #

现在要在提交时先执行自定义的文件验证，只有验证通过才继续执行数据库存储逻辑：

function submitInfo() {
    var form = document.getElementById('needValidation');
    // 先执行HTML5原生必填验证
    if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
        form.classList.add('was-validated');
        return;
    }
    
    // 执行自定义文件验证
    var fileInput = document.getElementById('document');
    var isFileValid = uploadValidate(fileInput, 'doc', 'IDdoc', 'errorDivDoc');
    
    if (!isFileValid) {
        // 验证不通过，阻止后续操作
        form.classList.add('was-validated');
        return;
    }
    
    // 所有验证通过，执行数据库存储
    submitInfoRegistration(); //to store in DB
}

步骤3：优化错误提示样式 #

给错误提示加上默认隐藏的样式，确保验证失败时正确显示：

.invalid-feedback {
    display: none;
    color: #dc3545;
}
.was-validated .invalid-feedback {
    display: block;
}

关键说明 #

• 为什么原来的return false没用？因为uploadValidate是在onchange事件里调用的，它的返回值只会影响onchange的默认行为，不会关联到后续的提交操作，所以必须在提交环节再次验证。
• accept=".jpg,.png"只是前端的友好提示，用户仍能手动选择其他格式文件，所以自定义格式验证是必要的。

这样修改后，只有当文件是jpg/png格式且大小≤2MB时，表单才会执行数据库存储逻辑，否则会弹出错误提示并阻止提交。

内容的提问来源于stack exchange，提问作者Gabby