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



我在获取输入类型"文件"的引导验证时遇到问题。 即使我没有选择要上传的文件,表单也在验证中。 它应该至少需要一个特定类型和最大大小的文件。 我可以说验证返回为已验证,因为我在字段的最右侧得到了绿色复选标记。 我对引导相当陌生,但我无法弄清楚这一点。 任何帮助将不胜感激!

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

我认为问题是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>

最新更新