New Validation Element | File

src/demo/index3.html

@@ -73,6 +73,11 @@
                        placeholder="Enter Department">
             </div>
 
+            <br><br><br><br><br><br><br><br><br><br><br><br><br>
+
+            <label for="file">File</label>
+            <input type="file" required class="form-control" id="file" data-extensions="png,jpeg,jpg" name="file">
+
             <br><br><br><br><br><br><br><br><br><br>
         </div>
         <div>

src/js/formValidator.js

@@ -19,6 +19,7 @@
  *
  * Date: 2017-05-01
  */
+
 /*
  * For Managing overall Validation flow.
  */
@@ -181,6 +182,8 @@ var jsValidator = {
         if (activeElem.type == 'email') jsFilter.email(activeElem);
         // Apply filter for Numeric elements.
         // if (activeElem.min || activeElem.max || activeElem.minLength || activeElem.maxLength) jsFilter.limit(activeElem);
+        // Apply filter File elements.
+        if (activeElem.type == 'file') jsFilter.file(activeElem);
         // Apply filter with string, alphaNumeric and pregMatch.
         if (activeElem.getAttribute('data-allow')) jsFilter.string(activeElem);
         // Apply filter with pattern.
@@ -283,6 +286,16 @@ var jsFilter = {
         }
         if (true === status) element.addEventListener('keypress', jsRuleSets.email, false);
     },
+    file: function (element) {
+        var status = true;
+        if (false === this.forceFilter) {
+            status = false;
+            if (true === element.required) {
+                status = true;
+            }
+        }
+        if (true === status) element.addEventListener('change', jsRuleSets.file, false);
+    },
     /*
      * Numeric with Limited elements filter listener.
      */
@@ -320,9 +333,9 @@ var jsFilter = {
             event.preventDefault();
         }
 
-            var num = +this.value, max = 31, min = 1;          //converts value to a Number
-            if(!this.value.length) return false;               //allows empty field
-            this.value = isNaN(num) ? min : num > max ? max : num < min  ? min : num;
+        var num = +this.value, max = 31, min = 1;          //converts value to a Number
+        if (!this.value.length) return false;               //allows empty field
+        this.value = isNaN(num) ? min : num > max ? max : num < min ? min : num;
 
         event.target.value = event.target.value.substring(0, event.target.value.length - 1);
     },
@@ -686,6 +699,28 @@ var jsRuleSets = {
         if (!email) status = false;
         return status;
     },
+    file: function (elem) {
+        var list_to_allow = elem.target.getAttribute('data-extensions');
+        var list_to_allow_array;
+        var inputID = elem.target.getAttribute('id');
+        var file_response;
+        if ('' === list_to_allow) return true;
+        if (-1 === list_to_allow.indexOf(',')) list_to_allow = [list_to_allow];
+
+        list_to_allow_array = list_to_allow.split(',');
+
+        var fileName = document.getElementById(inputID).value;
+        // Convert to lower case for native validation.
+        fileName = fileName.toLowerCase();
+        file_response = (new RegExp('(' + list_to_allow_array.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
+        if (false === file_response) {
+            alert('Allowed file types are ' + list_to_allow + ' !');
+            // Reset file type.
+            elem.target.value = '';
+            return false;
+        }
+        return true;
+    },
     /*
      * To Check Element Phone Value is Valid or Not.
      */
@@ -965,7 +1000,8 @@ var validationResponse = {
             min: 'This field length is too low.',
             max: 'This field length is exceeds the limit',
             password: 'Password does not match.',
-            email: 'Email is not valid'
+            email: 'Email is not valid',
+            file: 'This file is not allowed'
         };
         if (typeof errorType !== 'string') return false;
         if (typeof errorMessages[errorType] === 'undefined') return false;