Home Explore Help
Sign In
githab
/
bootstrapvalidator
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

- Add minSize option to File validator.
- Add File validator example.

BRAHIM 11 years ago
parent
3de77c81bd
commit
49a33cdd69
2 changed files with 130 additions and 1 deletions
Unified View Show Diff Stats
  1. 122 0
      demo/file.html
  2. 8 1
      src/js/validator/file.js

+ 122 - 0
demo/file.html
View File 

@@ -0,0 +1,122 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <title>BootstrapValidator demo</title>
 
+
 
+    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
 
+    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
 
+
 
+    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
 
+    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
 
+    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="row">
 
+            <div class="col-lg-8 col-lg-offset-2">
 
+                <div class="page-header">
 
+                    <h2>File validator</h2>
 
+                </div>
 
+
 
+                <form id="defaultForm" method="post" class="form-horizontal">
 
+                    <div class="form-group">
 
+                        <label class="col-lg-4 control-label">File</label>
 
+                        <div class="col-lg-7">
 
+                            <input type="file" class="form-control" name="firstFile" />
 
+                            <span class="help-block">Choose a pdf file.</span>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="form-group">
 
+                        <label class="col-lg-4 control-label">File with min size</label>
 
+                        <div class="col-lg-7">
 
+                            <input type="file" class="form-control" name="secondFile" />
 
+                            <span class="help-block">Choose a pdf file with a size more than 1M.</span>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="form-group">
 
+                        <label class="col-lg-4 control-label">File with max size</label>
 
+                        <div class="col-lg-7">
 
+                            <input type="file" class="form-control" name="thirdFile" />
 
+                            <span class="help-block">Choose a pdf file with a size less than 10M.</span>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="form-group">
 
+                        <label class="col-lg-4 control-label">File with min and max size</label>
 
+                        <div class="col-lg-7">
 
+                            <input type="file" class="form-control" name="fourthFile" />
 
+                            <span class="help-block">Choose a pdf file with a size between 1M and 10M.</span>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="form-group">
 
+                        <div class="col-lg-9 col-lg-offset-4">
 
+                            <button type="submit" class="btn btn-primary" name="filevalidate" value="Validate">Validate</button>
 
+                        </div>
 
+                    </div>
 
+                </form>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+<script type="text/javascript">
 
+$(document).ready(function() {
 
+    $('#defaultForm').bootstrapValidator({
 
+        feedbackIcons: {
 
+            valid: 'glyphicon glyphicon-ok',
 
+            invalid: 'glyphicon glyphicon-remove',
 
+            validating: 'glyphicon glyphicon-refresh'
 
+        },
 
+        fields: {
 
+            firstFile: {
 
+                validators: {
 
+                    file: {
 
+                        extension: 'pdf',
 
+                        type: 'application/pdf',
 
+                        message: 'Please choose a pdf file.'
 
+                    }
 
+                }
 
+            },
 
+            secondFile: {
 
+                validators: {
 
+                    file: {
 
+                        extension: 'pdf',
 
+                        type: 'application/pdf',
 
+                        minSize: 1024*1024,
 
+                        message: 'Please choose a pdf file with a size more than 1M.'
 
+                    }
 
+                }
 
+            },
 
+            thirdFile: {
 
+                validators: {
 
+                    file: {
 
+                        extension: 'pdf',
 
+                        type: 'application/pdf',
 
+                        maxSize: 10*1024*1024,
 
+                        message: 'Please choose a pdf file with a size less than 10M.'
 
+                    }
 
+                }
 
+            },
 
+            fourthFile: {
 
+                validators: {
 
+                    file: {
 
+                        extension: 'pdf',
 
+                        type: 'application/pdf',
 
+                        minSize: 1024*1024,
 
+                        maxSize: 10*1024*1024,
 
+                        message: 'Please choose a pdf file with a size between 1M and 10M.'
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    })
 
+    .on('success.form.bv', function(e) {
 
+        e.preventDefault();
 
+        $('#defaultForm').data('bootstrapValidator').disableSubmitButtons(true);
 
+    });
 
+});
 
+</script>
 
+</body>
 
+</html>

+ 8 - 1
src/js/validator/file.js
View File 

@@ -7,6 +7,7 @@
 
         html5Attributes: {
 
         html5Attributes: {
 
             extension: 'extension',
 
             extension: 'extension',
 
             maxsize: 'maxSize',
 
             maxsize: 'maxSize',
 
+            minsize: 'minSize',
 
             message: 'message',
 
             message: 'message',
 
             type: 'type'
 
             type: 'type'
 
         },
 
         },
 
@@ -19,6 +20,7 @@
 
          * @param {Object} options Can consist of the following keys:
 
          * @param {Object} options Can consist of the following keys:
 
          * - extension: The allowed extensions, separated by a comma
 
          * - extension: The allowed extensions, separated by a comma
 
          * - maxSize: The maximum size in bytes
 
          * - maxSize: The maximum size in bytes
 
+         * - minSize: the minimum size in bytes
 
          * - message: The invalid message
 
          * - message: The invalid message
 
          * - type: The allowed MIME type, separated by a comma
 
          * - type: The allowed MIME type, separated by a comma
 
          * @returns {Boolean}
 
          * @returns {Boolean}
 
@@ -39,7 +41,12 @@
 
                 var files = $field.get(0).files,
 
                 var files = $field.get(0).files,
 
                     total = files.length;
 
                     total = files.length;
 
                 for (var i = 0; i < total; i++) {
 
                 for (var i = 0; i < total; i++) {
 
-                    // Check file size
 
+                    // Check the minSize
 
+                    if (options.minSize && files[i].size < parseInt(options.minSize, 10)) {
 
+                        return false;
 
+                    }
 
+                    
+                    // Check the maxSize
 
                     if (options.maxSize && files[i].size > parseInt(options.maxSize, 10)) {
 
                     if (options.maxSize && files[i].size > parseInt(options.maxSize, 10)) {
 
                         return false;
 
                         return false;
 
                     }
 
                     }