Bootstrap文件输入框验证失效求助：未选文件仍通过验证

Hey there, let's get your file input validation working correctly! The main issues here are missing required field validation and an incorrect file size calculation. Here's how to fix it step by step:

Key Problems in Your Code #

• No required field enforcement: The file validator in bootstrapValidator doesn't automatically check if a file is selected — you need to add the notEmpty validator to make the field mandatory.
• Incorrect maxSize value: Your calculation 5120 * 5120 * 5120 * 5120 * 5120 is way off. 5 MB translates to 5 * 1024 * 1024 bytes (since 1 MB = 1024 KB, 1 KB = 1024 bytes).

Fixed Full Code #

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/2.1.0/bootstrap-filestyle.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#frm_resumeupload').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    resume: {
                        validators: {
                            // Add this to force file selection
                            notEmpty: {
                                message: 'Please select a resume file to upload'
                            },
                            file: {
                                extension: 'doc,docx,pdf,rtf,txt',
                                type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf,text/plain',
                                // Corrected maxSize for 5 MB
                                maxSize: 5 * 1024 * 1024,
                                message: 'The selected file is not valid, it should be (doc,docx,pdf,rtf,txt) and no larger than 5 MB.'
                            }
                        }
                    }
                }
            });

            $("#resume_submitBtn").click(function () {
                $('#frm_resumeupload').bootstrapValidator('validate');
                
                // Stop modal from opening if validation fails
                var isValid = $('#frm_resumeupload').data('bootstrapValidator').isValid();
                if (!isValid) {
                    $('#saveModal').modal('hide');
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <form name="frm_resumeupload" id="frm_resumeupload" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <input name="resume" id="resume" type="file" class="filestyle" data-text="Select New Resume" data-dragdrop="true" data-btnClass="btn-primary" data-buttonBefore="true">
            </div>
            <button type="button" id="resume_submitBtn" class="btn btn-primary" data-toggle="modal" data-target="#saveModal">Upload Resume</button>&nbsp;&nbsp;
        </form>
    </div>
</body>
</html>

Quick Explanations #

• The notEmpty validator now ensures users can't skip selecting a file, with a clear error message.
• The corrected maxSize value properly enforces the 5 MB limit.
• I added a check in the submit button handler to block the modal from opening if validation fails — this keeps users from proceeding until they fix the issue.

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