Fix #11 - input type=number & better floating test

ghiscoding · ghiscoding · commit 41f9ed9abc7a · 2015-01-04T20:28:33.000-05:00
- Fixed floating validator to also permit dot as first char (basically
skipping the 0), which give 2 ways of writing a valid float number: 0.2
or .2 .... -0.2 or -.2
- Fixed &amp; removed the keyboard blocking (sometimes upset user) of
invalid character on input type="number", I am not instead displaying an
error message of invalid keyboard character so that user is more
informed.
- Added a plunker live demo
diff --git a/angular-validation.js b/angular-validation.js
@@ -196,15 +196,15 @@
                 break; 
               case "float" :
                 validators[i] = {
-                  pattern: "^\\d+[\\.]+\\d+$",
+                  pattern: "^\\d*\\.{1}\\d+$",
                   message: "INVALID_FLOAT",
                   type: "regex"
                 };
                 break;
               case "floatSigned" :
               case "float_signed" :
                 validators[i] = {
-                  pattern: "^[+-]?\\d+[\\.]+\\d+$",
+                  pattern: "^[-+]?\\d*\\.{1}\\d+$",
                   message: "INVALID_FLOAT_SIGNED",
                   type: "regex"
                 };
@@ -296,14 +296,14 @@
                 break; 
               case "numeric" :
                 validators[i] = {
-                  pattern: "^\\d+[\\.]?\\d*$",
+                  pattern: "^\\d*\\.?\\d+$",
                   message: "INVALID_NUMERIC",
                   type: "regex"
                 };
                 break; 
               case "numeric_signed" :
                 validators[i] = {
-                  pattern: "^[-+]?\\d+[\\.]?\\d*$",
+                  pattern: "^[-+]?\\d*\\.?\\d+$",
                   message: "INVALID_NUMERIC_SIGNED",
                   type: "regex"
                 };
@@ -347,7 +347,7 @@
         
         /** We seem to have little problems validating a field of <input type="number"> 
           * as angular reports undefined value even though user could type invalid chars
-          * Bind trigger to block alpha chars completely except these: numbers, decimal and dash
+          * Bind trigger to block alpha chars completely except these: numbers, decimal, add and dash
           */
         var bindBlockingCharsOnInputNumber = function() {
           // get some properties of the inspected element
@@ -362,7 +362,9 @@
                 evt.preventDefault();
                 return false;
               }              
-              if (charCode > 31 && (charCode != 46 && ((charCode < 48 || charCode > 57) && charCode < 96 || charCode > 105)) && (charCode != 190 && charCode != 110 && charCode != 109 && charCode != 173)) {
+              // keycode: 8(backspace), 35(home), 36(end), 37(left arrow), 39(right arrow), 46(delete), 48-57(0-9), 96-105(numpad 0-9), 107(add), 109(substract), 110(decimal), 173(dash), 190(period)
+              regexBlocking = new RegExp("^(8|3[5-7]|39|46|4[8-9]|5[0-7]|9[6-9]|10[0-5]|107|109|110|173|190)$");
+              if(!regexBlocking.test(charCode)) {
                 evt.preventDefault();
                 return false;
               }
@@ -461,9 +463,15 @@
               if(elm.prop('disabled')) {
                 isValid = true;
               } else {
-                // run the Regex test through each iteration, if required (\S+) and is null then it's invalid automatically
-                regex = new RegExp(validators[j].pattern, 'i');
-                isValid = (validators[j].pattern === "\\S+" && (typeof strValue === "undefined" || strValue === null)) ? false : regex.test(strValue);
+                // before running Regex test, we'll make sure that an input of type="number" doesn't hold an invalid keyboard character, if that is the case then no need to run Regex
+                if(typeof strValue === "string" && strValue === "" && elm.prop('type').toUpperCase() === "NUMBER") {
+                  validators[0].message = "INVALID_KEY_CHAR"; // replace the first error message by the invalid keyboard error msg
+                  isValid = false;
+                }else {
+                  // run the Regex test through each iteration, if required (\S+) and is null then it's invalid automatically
+                  regex = new RegExp(validators[j].pattern, 'i');
+                  isValid = (validators[j].pattern === "\\S+" && (typeof strValue === "undefined" || strValue === null)) ? false : regex.test(strValue);
+                }
               }
             }
             if(!isValid) {
@@ -502,7 +510,7 @@
           }
 
           // attach/bind trigger on a <input type="number"/> and only allow: numbers, decimal and dash
-          bindBlockingCharsOnInputNumber();
+          //bindBlockingCharsOnInputNumber();
 
           // invalidate field before doing any validation 
           if(isFieldRequired) { 
diff --git a/locales/validation/en.json b/locales/validation/en.json
@@ -25,6 +25,7 @@
     "INVALID_IPV4":             "Must be a valid IP (IPV4). ",    
     "INVALID_IPV6":             "Must be a valid IP (IPV6). ",    
     "INVALID_IPV6_HEX":         "Must be a valid IP (IPV6 Hex). ",    
+    "INVALID_KEY_CHAR":         "Invalid keyboard entry on a field of type \"number\". ",
     "INVALID_MAX_CHAR":         "May not be greater than :param characters. ",
     "INVALID_MAX_NUM":          "Needs to be a numeric value, equal to, or lower than :param. ",
     "INVALID_MIN_CHAR":         "Must be at least :param characters. ",
@@ -39,7 +40,7 @@
 
     "AREA1":            "TextArea: Alphanumeric + Minimum(15) + Required",
     "INPUT1":           "Alphanumeric + Exactly(3) + Required  -- typing-limit(5sec)",
-    "INPUT2":           "Float (integer excluded) -- input type=\"number\" -- BLOCK non-numeric characters ",
+    "INPUT2":           "Number positive or negative -- input type=\"number\" -- Error on non-numeric characters ",
     "INPUT3":           "Floating number range (integer excluded) -- between_num:x,y OR min_num:x|max_num:y ",
     "INPUT4":           "Multiple Validations + Custom Regex of Date Code (YYWW)",
     "INPUT5":           "Email",
diff --git a/locales/validation/fr.json b/locales/validation/fr.json
@@ -25,6 +25,7 @@
     "INVALID_IPV4":             "Doit être un IP valide (IPV4). ",    
     "INVALID_IPV6":             "Doit être un IP valide (IPV6). ",    
     "INVALID_IPV6_HEX":         "Doit être un IP valide (IPV6 Hex). ",    
+    "INVALID_KEY_CHAR":         "Entrée clavier invalide sur un champs de type \"nombre\". ",
     "INVALID_MAX_CHAR":         "Doit être plus petit que :param caractères. ",
     "INVALID_MAX_NUM":          "Doit être une valeur numérique, égale ou inférieure à :param. ",
     "INVALID_MIN_CHAR":         "Doit avoir au moins :param caractères. ",
@@ -39,7 +40,7 @@
 
     "AREA1":            "TextArea: Alphanumérique + Minimum(15) + Required",
     "INPUT1":           "Alphanumérique + Exactement(3) + Requis  -- typing-limit(5sec)",
-    "INPUT2":           "Nombre Flottant (entier exclu) -- input type=\"number\" -- BLOQUER caractères non-numerique",
+    "INPUT2":           "Nombre positif ou négatif -- input type=\"number\" -- Erreur sur caractères non-numérique",
     "INPUT3":           "Intervalle de Nombre Flottant (entier exclu) -- between_num:x,y OU min_num:x|max_num:y",
     "INPUT4":           "Multiple Validations + Regex Personnalisé d'un Code Date (AASS)",
     "INPUT5":           "Courriel",
diff --git a/readme.md b/readme.md
@@ -10,6 +10,9 @@ For a smoother user experience, I also added validation on inactivity (timer). S
 
 Now also supporting AngularJS 1.3.x (see legacy folder for 1.2.x support)
 
+## Live Demo
+http://plnkr.co/edit/jADq7H?p=preview
+
 ##  Some Working Examples
 
 Let's start with a simple example and then let's get down to real business.
@@ -139,11 +142,12 @@ P.S. If you define new Language set, please make a pull request and I would be h
 
 Available Validators
 --------------------
-##### All validators are written as `snake_case` but it's up to the user's taste and could also be written as `camelCase`. So for example `alpha_dash_spaces` and `alphaDashSpaces` are both equivalent.
+All validators are written as `snake_case` but it's up to the user's taste and could also be written as `camelCase`. So for example `alpha_dash_spaces` and `alphaDashSpaces` are both equivalent.
+##### NOTE: on an input type="number", the "+" sign is an invalid character (browser limitation) even if you are using a `signed` validator. If you really wish to use the "+", then change your input to type="text".
 * `alpha` Only alpha characters (including latin) are present (a-z, A-Z)
 * `alpha_spaces` Only alpha characters (including latin) and spaces are present (a-z, A-Z)
 * `alpha_num` Only alpha-numeric characters (including latin) are present (a-z, A-Z, 0-9)
-* `alpha_num_spaces` Only alpha-numeric characters (with latin) and spaces are present (a-z, A-Z, 0-9)
+* `alpha_num_spaces` Only alpha-numeric characters (with latin & spaces) are present (a-z, A-Z, 0-9)
 * `alpha_dash` Only alpha-numeric characters + dashes, underscores are present (a-z, A-Z, 0-9, _-)
 * `alpha_dash_spaces` Alpha-numeric chars + dashes, underscores and spaces (a-z, A-Z, 0-9, _-)
 * `between_len:min,max` Ensures the length of a string is between a min,max string length.
@@ -155,7 +159,7 @@ Available Validators
 * `date_euro_long` Ensure date follows the Europe long format (dd-mm-yyyy) or (dd/mm/yyyy)
 * `date_euro_short` Ensure date follows the Europe short format (dd-mm-yy) or (dd/mm/yy)
 * `email` Checks for a valid email address
-* `exact_len:n` Ensures that field length precisely matches the specified length. n = length parameter.
+* `exact_len:n` Ensures that field length precisely matches the specified length (n).
 * `float` Only a positive floating point value (integer are excluded)
 * `float_signed` Only a floating point value (integer excluded), could be signed (-/+) positive/negative.
 * `iban` Check for a valid IBAN.
diff --git a/templates/testingForm.html b/templates/testingForm.html
@@ -7,12 +7,12 @@
         </div>
         <div class="form-group">    
             <label for="input2">{{ 'INPUT2' | translate }}</label>
-            <input type="number" class="form-control" name="input2" placeholder="float_signed|required" ng-model="form1.input2" validation="float_signed|required" />
+            <input type="number" class="form-control" name="input2" placeholder="numeric_signed|required" ng-model="form1.input2" validation="numeric_signed|required" />
             <span class="validation text-danger"></span>
         </div>  
         <div class="form-group">    
             <label for="input3">{{ 'INPUT3' | translate }}</label>
-            <input type="number" class="form-control" name="input3" placeholder="float_signed|between_num:6,99.5|required" ng-model="form1.input3" validation="float_signed|between_num:6,99.5|required" />
+            <input type="number" class="form-control" name="input3" placeholder="float_signed|between_num:-0.6,99.5|required" ng-model="form1.input3" validation="float_signed|between_num:-0.6,99.5|required" />
             <span class="validation text-danger"></span>
         </div>     
         <div class="form-group">    
