Better error messages for file validations

Author: victorjonsson

README.md

@@ -234,28 +234,30 @@ var enErrorDialogs = {
     badTelephone : 'You have not given a correct phone number',
     badSecurityAnswer : 'You have not given a correct answer to the security question',
     badDate : 'You have not given a correct date',
-    lengthBadStart : 'You must give an answer between ',
-    lengthBadEnd : 'characters',
-    lengthTooLongStart : 'You have given an answer longer than ',
-    lengthTooShortStart : 'You have given an answer shorter than ',
-    notConfirmed : 'Values could not be confirmed',
+    lengthBadStart : 'The input value must be between ',
+    lengthBadEnd : ' characters',
+    lengthTooLongStart : 'The input value is longer than ',
+    lengthTooShortStart : 'The input value is shorter than ',
+    notConfirmed : 'Input values could not be confirmed',
     badDomain : 'Incorrect domain value',
-    badUrl : 'The answer you gave was not a correct URL',
-    badCustomVal : 'You gave an incorrect answer',
-    badInt : 'The answer you gave was not a correct number',
+    badUrl : 'The input value is not a correct URL',
+    badCustomVal : 'The input value is incorrect',
+    badInt : 'The input value was not a correct number',
     badSecurityNumber : 'Your social security number was incorrect',
     badUKVatAnswer : 'Incorrect UK VAT Number',
     badStrength : 'The password isn\'t strong enough',
     badNumberOfSelectedOptionsStart : 'You have to choose at least ',
     badNumberOfSelectedOptionsEnd : ' answers',
-    badAlphaNumeric : 'The answer you gave must contain only alphanumeric characters ',
+    badAlphaNumeric : 'The input value can only contain alphanumeric characters ',
     badAlphaNumericExtra: ' and ',
-    wrongFileSize : 'The file you are trying to upload is too large',
-    wrongFileType : 'The file you are trying to upload is of wrong type',
-    groupCheckedTooFewStart : 'Please choose at least ',
-    groupCheckedTooManyStart : 'Please choose a maximum of ', 
+    wrongFileSize : 'The file you are trying to upload is too large (max %s)',
+    wrongFileType : 'Only files of type %s is allowed',
     groupCheckedRangeStart : 'Please choose between ',
-    groupCheckedEnd : ' item(s)'
+    groupCheckedTooFewStart : 'Please choose at least ',
+    groupCheckedTooManyStart : 'Please choose a maximum of ',
+    groupCheckedEnd : ' item(s)',
+    badCreditCard : 'The credit card number is not correct',
+    badCVV : 'The CVV number was not correct'
 };
 ```
 

form-validator/date.dev.js

@@ -10,7 +10,7 @@
  *
  * @website http://formvalidator.net/#location-validators
  * @license Dual licensed under the MIT or GPL Version 2 licenses
- * @version 2.2.beta.30
+ * @version 2.2.beta.31
  */
 (function($) {
 

form-validator/file.dev.js

@@ -10,7 +10,7 @@
  *
  * @website http://formvalidator.net/
  * @license Dual licensed under the MIT or GPL Version 2 licenses
- * @version 2.2.beta.30
+ * @version 2.2.beta.31
  */
 (function($, window) {
 
@@ -19,7 +19,7 @@
         /**
          * @return {Array}
          */
-        _getTypes = function($input) {
+            _getTypes = function($input) {
             var allowedTypes = $.split( ($input.valAttr('allowing') || '').toLowerCase() );
 
             if( $.inArray('jpg', allowedTypes) > -1 && $.inArray('jpeg', allowedTypes) == -1)
@@ -29,10 +29,22 @@
             return allowedTypes;
         },
 
+        /**
+         * @param {Object} obj
+         * @param {String} key
+         * @param {String} insert
+         * @param {Object} lang
+         */
+            _generateErrorMsg = function(obj, key, insert, lang) {
+            var msg = lang[key];
+            obj.errorMessageKey = ''; // only use message attached to this object
+            obj.errorMessage = msg.replace('\%s', insert);
+        },
+
         /**
          * @param {String} msg
          */
-        _log = function(msg) {
+            _log = function(msg) {
             if( window.console && window.console.log ) {
                 window.console.log(msg);
             }
@@ -43,7 +55,7 @@
      */
     $.formUtils.addValidator({
         name : 'mime',
-        validatorFunction : function(str, $input) {
+        validatorFunction : function(str, $input, conf, language) {
 
             if( SUPPORTS_FILE_READER ) {
                 var valid = true,
@@ -66,17 +78,18 @@
 
                     if( !valid ) {
                         _log('Trying to upload a file with mime type '+mime+' which is not allowed');
+                        _generateErrorMsg(this, 'wrongFileType', allowedTypes.join(', '), language);
                     }
                 }
 
                 return valid;
-                
+
             } else {
                 _log('FileReader not supported by browser, will check file extension');
                 return $.formUtils.validators.validate_extension.validatorFunction(str, $input);
             }
         },
-        errorMessage : 'The file you are trying to upload is of wrong type',
+        errorMessage : '',
         errorMessageKey: 'wrongFileType'
     });
 
@@ -95,12 +108,13 @@
 
                 if( $.inArray(ext.toLowerCase(), types) == -1 ) {
                     valid = false;
+                    _generateErrorMsg(this, 'wrongFileType', allowedTypes.join(', '), language);
                     return false;
                 }
             });
             return valid;
         },
-        errorMessage : 'The file you are trying to upload is of wrong type',
+        errorMessage : '',
         errorMessageKey: 'wrongFileType'
     });
 
@@ -109,7 +123,7 @@
      */
     $.formUtils.addValidator({
         name : 'size',
-        validatorFunction : function(val, $input) {
+        validatorFunction : function(val, $input, conf, language) {
             var maxSize = $input.valAttr('max-size');
             if( !maxSize ) {
                 _log('Input "'+$input.attr('name')+'" is missing data-validation-max-size attribute');
@@ -120,13 +134,18 @@
 
             var maxBytes = $.formUtils.convertSizeNameToBytes(maxSize),
                 valid = true;
+
             $.each($input.get(0).files || [], function(i, file) {
                 valid = file.size <= maxBytes;
                 return valid;
             });
+
+            if( !valid ) {
+                _generateErrorMsg(this, 'wrongFileSize', maxSize, language);
+            }
             return valid;
         },
-        errorMessage : 'The file you are trying to upload is too large',
+        errorMessage : '',
         errorMessageKey: 'wrongFileSize'
     });
 
@@ -166,7 +185,7 @@
             $(this)
                 .removeClass('error')
                 .parent()
-                    .find('.form-error').remove();
+                .find('.form-error').remove();
         });
     });
 

form-validator/file.js

@@ -172,7 +172,7 @@
             <label class="control-label">File validation</label>
             <input type="file" name="some-file1" class="form-control"
                    data-validation="size mime required"
-                   data-validation-size-error-msg="The file cant be larger than 400kb"
+                   data-validation-error-msg-size="The file cant be larger than 400kb"
                    data-validation-error-msg="You must upload an image file (max 400 kb)"
                    data-validation-allowing="jpg, png, ico"
                    data-validation-max-size="400kb" />

form-validator/form-test.html

@@ -17,7 +17,7 @@
  *
  * @website http://formvalidator.net/
  * @license Dual licensed under the MIT or GPL Version 2 licenses
- * @version 2.2.beta.30
+ * @version 2.2.beta.31
  */
 (function($, window) {
 

form-validator/html5.dev.js

@@ -5,7 +5,7 @@
 *
 * @website http://formvalidator.net/
 * @license Dual licensed under the MIT or GPL Version 2 licenses
-* @version 2.2.beta.30
+* @version 2.2.beta.31
 */
 (function($) {
 
@@ -1338,8 +1338,8 @@
             badNumberOfSelectedOptionsEnd : ' answers',
             badAlphaNumeric : 'The input value can only contain alphanumeric characters ',
             badAlphaNumericExtra: ' and ',
-            wrongFileSize : 'The file you are trying to upload is too large',
-            wrongFileType : 'The file you are trying to upload is of wrong type',
+            wrongFileSize : 'The file you are trying to upload is too large (max %s)',
+            wrongFileType : 'Only files of type %s is allowed',
             groupCheckedRangeStart : 'Please choose between ',
             groupCheckedTooFewStart : 'Please choose at least ',
             groupCheckedTooManyStart : 'Please choose a maximum of ',

form-validator/jquery.form-validator.js

@@ -10,7 +10,7 @@
  *
  * @website http://formvalidator.net/#location-validators
  * @license Dual licensed under the MIT or GPL Version 2 licenses
- * @version 2.2.beta.30
+ * @version 2.2.beta.31
  */
 (function($) {
 

form-validator/jquery.form-validator.min.js

@@ -13,7 +13,7 @@
  *  - cvv
  *
  * @website http://formvalidator.net/#security-validators
- * @version 2.2.beta.30
+ * @version 2.2.beta.31
  */
 (function($, window) {