Issue victorjonsson#323: Unformat numbers before sanitizing them and before validating them

-Add test for numberFormat sanitizer with number; add tests to ensure
that double sanitizing has no impact on input value
-Bug found involving escape sanitizer (see issue victorjonsson#381)
(The failing test has been commented out.)

Author: ray-print

form-validator/sanitize.dev.js

@@ -68,10 +68,14 @@
         },
         numberFormat : function(val, $input) {
           if ( 'numeral' in window ) {
+            //If this has been previously formatted, it needs to be unformatted first before being reformatted.
+            //Else numeral will fail
+            val = numeral().unformat(val);
             val = numeral(val).format( $input.attr('data-sanitize-number-format') );
           }
           else {
-            throw new Error('Using sanitation function "numberFormat" requires that you include numeraljs (http://http://numeraljs.com/)');
+            throw new Error('Using sanitation function "numberFormat" requires that you include numeral.js ' +
+              '(http://numeraljs.com/)');
           }
           return val;
         },

form-validator/src/core-validators.js

@@ -165,6 +165,19 @@
           steps = $el.valAttr('step') || '',
           allowsSteps = false;
 
+        var sanitize = $el.attr('data-sanitize') || '';
+        var isFormattedWithNumeral = sanitize.split(/\s/).find(function (name) {
+          return (name === 'numberFormat');
+        });
+        if (isFormattedWithNumeral) {
+          if (!window.numeral) {
+            throw new ReferenceError('The data-sanitize value numberFormat cannot be used without the numeral' +
+              ' library. Please see Data Validation in http://www.formvalidator.net for more information.');
+          }
+          //Unformat input first, then convert back to String
+          val = String(numeral().unformat(val));
+        }
+
         if (allowing.indexOf('number') === -1) {
           allowing += ',number';
         }

package.json

@@ -35,6 +35,7 @@
     "grunt-contrib-uglify": "^0.8.0",
     "grunt-contrib-watch": "^0.6.1",
     "jquery": "^2.1.4",
+    "numeral": "~1.5.3",
     "qunitjs": "^1.20.0"
   },
   "dependencies": {

test/form.html

@@ -265,6 +265,9 @@
       <div class="form-group">
             <label class="control-label">Number auto formatted '0,0.0000'</label>
             <input name="numeral" data-sanitize="numberFormat" data-sanitize-number-format="0,0.0000" />
+            <label class="control-label">Number format with numeral</label>
+            <input type="text" name="amount" data-validation="number" data-validation-allowing="float"
+                   data-sanitize="numberFormat"  data-sanitize-number-format="0.0,0">
         </div>
         <div class="form-group">
             <label class="control-label">Alphanumeric (will only be validated if the checkbox is checked)</label>
@@ -425,7 +428,6 @@ <h2>Validation Module: Brazil</h2>
     window.applyValidation(true, '#form-a', 'top');
     window.applyValidation(false, '#form-b', 'element');
     window.applyValidation(true, '#form-c', function() {
-        console.log('in here then');
         return $('#error-container');
     }, 'sanitize'+dev);
     window.applyValidation(true, '#form-d', 'element', 'html5'+dev);
@@ -450,6 +452,24 @@ <h2>Validation Module: Brazil</h2>
             console.log('Input '+this.name+' is '+validationResult);
         });
 
+  //Initialize numeral with the correct delimiters for the numberFormat sanitizer
+  numeral.language('it', {
+    delimiters: {
+      thousands: '.',
+      decimal: ','
+    },
+    abbreviations: {
+      thousand: 'k',
+      million: 'm',
+      billion: 'b',
+      trillion: 't'
+    },
+    currency: {
+      symbol: '€'
+    }
+  });
+  numeral.language('it');
+
 })(jQuery, window);
 </script>
 </body>

test/phantom-polyfills.js

@@ -0,0 +1,23 @@
+//MDN
+if (!Array.prototype.find) {
+  Array.prototype.find = function(predicate) {
+    if (this === null) {
+      throw new TypeError('Array.prototype.find called on null or undefined');
+    }
+    if (typeof predicate !== 'function') {
+      throw new TypeError('predicate must be a function');
+    }
+    var list = Object(this);
+    var length = list.length >>> 0;
+    var thisArg = arguments[1];
+    var value;
+
+    for (var i = 0; i < length; i++) {
+      value = list[i];
+      if (predicate.call(thisArg, value, i, list)) {
+        return value;
+      }
+    }
+    return undefined;
+  };
+}

test/qunit.html

@@ -11,9 +11,11 @@
 <div id="qunit-fixture"></div>
 <form id="dummy-form" style="visibility: hidden"></form>
 
+<script src="phantom-polyfills.js"></script>
 <script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/qunitjs/qunit/qunit.js"></script>
 <script src="../form-validator/jquery.form-validator.min.js"></script>
+<script src="../node_modules/numeral/numeral.js"></script>
 <script>
 (function($) {
 
@@ -833,10 +835,27 @@
                     attr: {
                         'data-sanitize-strip' : '$, @'
                     }
+                }, /* This functionality doesn't work correctly. See issue #381
+                escape: {
+                    val: '<p style="color: pink">hejsan & så\' vidare</p>',
+                    expected:  '&lt;p style=&quot;color: pink&quot;&gt;hejsan &amp; så&#8217; vidare&lt;/p&gt;'
+                }, */
+                basicNumberFormat1: {
+                    val: '-8000.00',
+                    expected: '-8,000.0',
+                    attr: {
+                      'data-sanitize-number-format': '0,0.0'
+                    },
+                    sanitize: 'numberFormat'
                 },
-                escape : {
-                    val : '<p style="color: pink">hejsan & så\' vidare</p>',
-                    expected:  '&lt;p style=&quot;color: pink&quot;&gt;hejsan &amp; så&#8217; vidare&lt;/p&gt;'                }
+                basicNumberFormat2: {
+                    val: '12221.444',
+                    expected: '12,221',
+                    attr: {
+                      'data-sanitize-number-format': '0,0'
+                    },
+                    sanitize: 'numberFormat'
+                }
             };
 
             $.each(sanitationTests, function(sanitation, data) {
@@ -846,13 +865,15 @@
                     $input.attr(attrName, attrVal);
                 });
                 $.formUtils.setupSanitation({}, $form, $.formUtils.defaultConfig());
+
                 $input.val(data.val);
+
+                $input.trigger('blur');
+                equal($input.val(), data.expected, 'Sanitize with "'+sanitation+'"');
+                //Verify that sanitizing twice has no effect
+                $input.trigger('focus');
                 $input.trigger('blur');
-                equal(
-                    $input.val(),
-                    data.expected,
-                    'Sanitize with "'+sanitation+'"'
-                );
+                equal($input.val(), data.expected, 'Sanitize twice with "'+sanitation+'"');
             });
 
         });