Add validator and test suite for rgba() color validation

dist/css/bootstrapValidator.min.css

@@ -3,10 +3,14 @@
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
  *
 <<<<<<< HEAD
+<<<<<<< HEAD
  * @version     v0.5.3-dev, built on 2014-10-06 8:02:42 AM
 =======
  * @version     v0.5.2-dev, built on 2014-09-18 9:55:01 PM
 >>>>>>> Add built files for the rgbColor and keywordColor commits
+=======
+ * @version     v0.5.2-dev, built on 2014-09-18 9:55:14 PM
+>>>>>>> Add validator and test suite for rgba() color validation
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT

dist/js/bootstrapValidator.js

@@ -3,10 +3,14 @@
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
  *
 <<<<<<< HEAD
+<<<<<<< HEAD
  * @version     v0.5.3-dev, built on 2014-10-06 8:02:42 AM
 =======
  * @version     v0.5.2-dev, built on 2014-09-18 9:55:01 PM
 >>>>>>> Add built files for the rgbColor and keywordColor commits
+=======
+ * @version     v0.5.2-dev, built on 2014-09-18 9:55:14 PM
+>>>>>>> Add validator and test suite for rgba() color validation
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT
@@ -5858,6 +5862,34 @@ if (typeof jQuery === 'undefined') {
 }(window.jQuery));
 
 ;(function($) {
+    $.fn.bootstrapValidator.i18n.rgbaColor = $.extend($.fn.bootstrapValidator.i18n.rgbaColor || {}, {
+        'default': 'Please enter a valid rgb color'
+    });
+
+    $.fn.bootstrapValidator.validators.rgbaColor = {
+
+        /**
+         * Return true if the input value is a valid rgb() color
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - message: The invalid message
+         * @returns {Boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val();
+            var regexInteger = /^rgba\((\s*(\b([01]?\d{1,2}|2[0-4]\d|25[0-5])\b)\s*,){3}(\s*(0?(\.\d+)?|1(\.0+)?)\s*)\)$/;
+            var regexPercent = /^rgba\((\s*(\b(0?\d{1,2}|100)\b%)\s*,){3}(\s*(0?(\.\d+)?|1(\.0+)?)\s*)\)$/;
+            if (value === '') {
+                return true;
+            }
+            return regexInteger.test(value) || regexPercent.test(value);
+        }
+    };
+}(window.jQuery));
+
+;(function($) {
     $.fn.bootstrapValidator.i18n.rtn = $.extend($.fn.bootstrapValidator.i18n.rtn || {}, {
         'default': 'Please enter a valid RTN number'
     });

src/js/validator/rgbaColor.js

@@ -0,0 +1,28 @@
+(function($) {
+    $.fn.bootstrapValidator.i18n.rgbaColor = $.extend($.fn.bootstrapValidator.i18n.rgbaColor || {}, {
+        'default': 'Please enter a valid rgb color'
+    });
+
+    $.fn.bootstrapValidator.validators.rgbaColor = {
+
+        /**
+         * Return true if the input value is a valid rgb() color
+         *
+         * @param {BootstrapValidator} validator The validator plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - message: The invalid message
+         * @returns {Boolean}
+         */
+        validate: function(validator, $field, options) {
+            var value = $field.val();
+            var regexInteger = /^rgba\((\s*(\b([01]?\d{1,2}|2[0-4]\d|25[0-5])\b)\s*,){3}(\s*(0?(\.\d+)?|1(\.0+)?)\s*)\)$/;
+            var regexPercent = /^rgba\((\s*(\b(0?\d{1,2}|100)\b%)\s*,){3}(\s*(0?(\.\d+)?|1(\.0+)?)\s*)\)$/;
+            if (value === '') {
+                return true;
+            }
+            return regexInteger.test(value) || regexPercent.test(value);
+        }
+    };
+}(window.jQuery));
+

test/spec.js

@@ -5952,6 +5952,212 @@ describe('rgbColor', function() {
 
 });
 
+describe('rgbaColor', function() {
+
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="rbgColorForm">',
+                    '<div class="form-group">',
+                        '<input type="text" name="rgba" data-bv-rgbacolor />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#rbgColorForm').bootstrapValidator();
+
+        this.bv          = $('#rbgColorForm').data('bootstrapValidator');
+        this.$rgbaColor = this.bv.getFieldElements('rgba');
+    });
+
+    afterEach(function() {
+        $('#rbgColorForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+    it('accept rgba()', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept spaces around numeric values', function() {
+        this.$rgbaColor.val('rgba( 255 , 255 , 255 , 1 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept multiple spaces around numeric values', function() {
+        this.$rgbaColor.val('rgba(  255  ,  255    ,       255 ,  1     )');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept interger values', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept percent values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 0', function() {
+        this.$rgbaColor.val('rgba(255,255,255,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 1', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with leading 0', function() {
+        this.$rgbaColor.val('rgba(255,255,255,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel without leading 0', function() {
+        this.$rgbaColor.val('rgba(255,255,255,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with more than 1 decimal place', function() {
+        this.$rgbaColor.val('rgba(255,255,255,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 0 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 1 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with leading 0 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel without leading 0 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with more than 1 decimal place with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('reject percentage value for alpha channel', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject integers larger than 1 for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,2)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative integers for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,-1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject floats larger than 1 for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1.000000000001)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative floats for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,-0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject more floats larger than 1 for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,2.3)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject mixed intergers and percentile input', function() {
+        this.$rgbaColor.val('rgba(255,255,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative integers', function() {
+        this.$rgbaColor.val('rgba(-10,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative percentages', function() {
+        this.$rgbaColor.val('rgba(-10%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('require rgba()', function() {
+        this.$rgbaColor.val('255,255,255,1');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject intergers above 255', function() {
+        this.$rgbaColor.val('rgba(255,255,256),1');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject percentages above 100%', function() {
+        this.$rgbaColor.val('rgba(100%,100%,101%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject space between rgba and (', function() {
+        this.$rgbaColor.val('rgba (255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject leading space', function() {
+        this.$rgbaColor.val(' rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject trailing space', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+});
+
 describe('uri', function() {
     beforeEach(function() {
         $([

test/spec/validator/rgbaColor.js

@@ -0,0 +1,205 @@
+describe('rgbaColor', function() {
+
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="rbgColorForm">',
+                    '<div class="form-group">',
+                        '<input type="text" name="rgba" data-bv-rgbacolor />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#rbgColorForm').bootstrapValidator();
+
+        this.bv          = $('#rbgColorForm').data('bootstrapValidator');
+        this.$rgbaColor = this.bv.getFieldElements('rgba');
+    });
+
+    afterEach(function() {
+        $('#rbgColorForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+    it('accept rgba()', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept spaces around numeric values', function() {
+        this.$rgbaColor.val('rgba( 255 , 255 , 255 , 1 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept multiple spaces around numeric values', function() {
+        this.$rgbaColor.val('rgba(  255  ,  255    ,       255 ,  1     )');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept interger values', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept percent values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 0', function() {
+        this.$rgbaColor.val('rgba(255,255,255,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 1', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with leading 0', function() {
+        this.$rgbaColor.val('rgba(255,255,255,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel without leading 0', function() {
+        this.$rgbaColor.val('rgba(255,255,255,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with more than 1 decimal place', function() {
+        this.$rgbaColor.val('rgba(255,255,255,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 0 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept integer alpha channel value of 1 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with leading 0 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel without leading 0 with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('accept floating alpha channel with more than 1 decimal place with percentage rgb values', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toBeTruthy();
+    });
+
+    it('reject percentage value for alpha channel', function() {
+        this.$rgbaColor.val('rgba(100%,100%,100%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject integers larger than 1 for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,2)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative integers for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,-1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject floats larger than 1 for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1.000000000001)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative floats for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,-0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject more floats larger than 1 for alpha channel', function() {
+        this.$rgbaColor.val('rgba(255,255,255,2.3)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject mixed intergers and percentile input', function() {
+        this.$rgbaColor.val('rgba(255,255,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative integers', function() {
+        this.$rgbaColor.val('rgba(-10,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject negative percentages', function() {
+        this.$rgbaColor.val('rgba(-10%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('require rgba()', function() {
+        this.$rgbaColor.val('255,255,255,1');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject intergers above 255', function() {
+        this.$rgbaColor.val('rgba(255,255,256),1');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject percentages above 100%', function() {
+        this.$rgbaColor.val('rgba(100%,100%,101%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject space between rgba and (', function() {
+        this.$rgbaColor.val('rgba (255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject leading space', function() {
+        this.$rgbaColor.val(' rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+    it('reject trailing space', function() {
+        this.$rgbaColor.val('rgba(255,255,255,1) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('rgba')).toEqual(false);
+    });
+
+});