bootstrap 验证输入类型文件不工作
bootstrap validate input type file not working
我无法使 bootstrap 验证输入类型 'file' 正常工作。即使我没有 select 要上传的文件,该表单也在验证。它应该至少需要一个特定类型和最大大小的文件。
我可以看出验证返回为已验证,因为我在该字段的最右侧看到了绿色复选标记。我是 bootstrap 的新手,但我搞不懂这个。任何帮助将不胜感激!
<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>
</form>
</div>
</body>
</html>
我认为问题是 minFiles
在这里不是有效参数。此处的快速解决方法是向 html 标记添加 required
属性。
例如:
<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>
我无法使 bootstrap 验证输入类型 'file' 正常工作。即使我没有 select 要上传的文件,该表单也在验证。它应该至少需要一个特定类型和最大大小的文件。 我可以看出验证返回为已验证,因为我在该字段的最右侧看到了绿色复选标记。我是 bootstrap 的新手,但我搞不懂这个。任何帮助将不胜感激!
<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>
</form>
</div>
</body>
</html>
我认为问题是 minFiles
在这里不是有效参数。此处的快速解决方法是向 html 标记添加 required
属性。
例如:
<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>