FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

file validator

Validate file



Option HTML attribute Type Description
extension data-fv-file-extension String The allowed extensions, separated by a comma
maxFiles data-fv-file-maxfiles Number The maximum number of files
maxSize data-fv-file-maxsize Number The maximum file size in bytes
maxTotalSize data-fv-file-maxtotalsize Number The maximum size in bytes for all files
minFiles data-fv-file-minfiles Number The minimum number of files
minSize data-fv-file-minsize Number The minimum file size in bytes
minTotalSize data-fv-file-mintotalsize Number The minimum size in bytes for all files
message data-fv-file-message String The error message
type data-fv-file-type String

The allowed MIME type, separated by a comma.

For example: Setting image/jpeg,image/png,application/pdf only allows to upload JPEG, PNG image and PDF document.

See popular MIME types listed below.

The maxSize and type are only used if the browser supports HTML 5 File API.

When setting options via HTML attributes, remember to enable the validator by setting data-fv-file="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods

Popular MIME types

The following table shows popular MIME types. For other MIME type, you can refer to the complete list.

MIME type File extensions
application/msword doc
application/pdf pdf
application/rtf rtf
application/ xls
application/ ppt
application/x-rar-compressed rar
application/x-shockwave-flash swf
application/zip zip
audio/midi mid midi kar
audio/mpeg,audio/mp3 mp3
audio/ogg ogg
audio/x-m4a m4a
audio/x-realaudio ra
image/gif gif
image/jpeg jpeg jpg
image/png png
image/tiff tif tiff
image/vnd.wap.wbmp wbmp
image/x-icon ico
image/x-jng jng
image/x-ms-bmp bmp
image/svg+xml svg svgz
image/webp webp
text/css css
text/html html htm shtml
text/plain txt
text/xml xml
video/3gpp 3gpp 3gp
video/mp4 mp4
video/mpeg mpeg mpg
video/quicktime mov
video/webm webm
video/x-flv flv
video/x-m4v m4v
video/x-ms-wmv wmv
video/x-msvideo avi

Supporting multiple MIME types

The MIME type of given extension might be different on browsers. For example, MIME type of mp3 file is audio/mpeg on the Firefox, Opera, IE 7+ browsers. Meanwhile, at the time of writing, Google Chrome 42 returns audio/mp3 for mp3 file.

In this case, you should pass all the possible values separated by a comma to the type option as following:

    fields: {
        fileInput: {
            validators: {
                file: {
                    extension: 'mp3',
                    type: 'audio/mpeg,audio/mp3',
                    message: 'Please choose a MP3 file'


The following form allows to upload JPEG, PNG image which is smaller than 2 MB in size.

Use the promise validator if you want to validate the width and height of an image
<form id="fileForm" class="form-horizontal" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-xs-3 control-label">Avatar</label>
        <div class="col-xs-6">
            <input type="file" class="form-control" name="avatar" />

$(document).ready(function() {
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        fields: {
            avatar: {
                validators: {
                    notEmpty: {
                        message: 'Please select an image'
                    file: {
                        extension: 'jpeg,jpg,png',
                        type: 'image/jpeg,image/png',
                        maxSize: 2097152,   // 2048 * 1024
                        message: 'The selected file is not valid'
<form id="fileForm" class="form-horizontal" enctype="multipart/form-data"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Avatar</label>
        <div class="col-xs-6">
            <input type="file" class="form-control" name="avatar"
                data-fv-notempty-message="Please select an image"

                data-fv-file-message="The selected file is not valid" />

$(document).ready(function() {