引导验证输入类型文件不起作用答案

【问题标题】：bootstrap validate input type file not working引导验证输入类型文件不起作用
【发布时间】：2018-11-09 13:24:09
【问题描述】：

我无法让输入类型“文件”的引导验证正常工作。即使我没有选择要上传的文件，表单也在验证。它应该至少需要一个特定类型和最大大小的文件。我可以说验证返回为已验证，因为我在该字段的最右侧看到了绿色复选标记。我对引导程序相当陌生，但我无法弄清楚这一点。任何帮助将不胜感激！

<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><!-- Bootstrap 3.3.6 -->
        <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: {
                                file: {
                                    minFiles: 1,
                                    extension: 'doc,docx,pdf,rtf,txt',
                                    type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf,text/plain',
                                    maxSize: 5120 * 5120 * 5120 * 5120 * 5120,   // 5 MB
                                    message: 'The selected file is not valid, it should be (doc,docx,pdf,rtf,txt) and 5 MB at maximum.'
                                }
                            }
                        }
                    }
                });
                $("#resume_submitBtn").click(function () {
                    $('#frm_resumeupload').bootstrapValidator('validate');
                });    
            });
        </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>

【问题讨论】：

标签： jquery twitter-bootstrap forms validation bootstrapvalidator

【解决方案1】：

我认为问题是 minFiles 在此处不是有效参数。此处的快速解决方法是将required 属性添加到html 标记。

例如：

<input name="resume" id="resume" type="file" class="filestyle" data-text="Select New Resume" data-dragdrop="true" data-btnClass="btn-primary" data-buttonBefore="true" required>

【讨论】：

这对我有用，但我还有其他问题。最终，我发现我在页面的其他地方使用了相同的 ID。不过谢谢！