Add validator and test suite for hsl() color validation

dist/css/bootstrapValidator.min.css

@@ -4,6 +4,7 @@
  *
 <<<<<<< HEAD
 <<<<<<< 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
@@ -11,6 +12,9 @@
 =======
  * @version     v0.5.2-dev, built on 2014-09-18 9:55:14 PM
 >>>>>>> Add validator and test suite for rgba() color validation
+=======
+ * @version     v0.5.2-dev, built on 2014-09-18 9:55:28 PM
+>>>>>>> Add validator and test suite for hsl() color validation
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT

dist/js/bootstrapValidator.js

@@ -4,6 +4,7 @@
  *
 <<<<<<< HEAD
 <<<<<<< 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
@@ -11,6 +12,9 @@
 =======
  * @version     v0.5.2-dev, built on 2014-09-18 9:55:14 PM
 >>>>>>> Add validator and test suite for rgba() color validation
+=======
+ * @version     v0.5.2-dev, built on 2014-09-18 9:55:28 PM
+>>>>>>> Add validator and test suite for hsl() color validation
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT
@@ -3145,6 +3149,32 @@ if (typeof jQuery === 'undefined') {
     };
 }(window.jQuery));
 ;(function($) {
+    $.fn.bootstrapValidator.i18n.hslColor = $.extend($.fn.bootstrapValidator.i18n.hslColor || {}, {
+        'default': 'Please enter a valid hsl color'
+    });
+
+    $.fn.bootstrapValidator.validators.hslColor = {
+
+        /**
+         * Return true if the input value is a valid hsl() 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();
+            if (value === '') {
+                return true;
+            }
+            return /^hsl\((\s*(-?\d+)\s*,)(\s*(\b(0?\d{1,2}|100)\b%)\s*,)(\s*(\b(0?\d{1,2}|100)\b%)\s*)\)$/.test(value);
+        }
+    };
+}(window.jQuery));
+
+;(function($) {
     $.fn.bootstrapValidator.i18n.iban = $.extend($.fn.bootstrapValidator.i18n.iban || {}, {
         'default': 'Please enter a valid IBAN number',
         countryNotSupported: 'The country code %s is not supported',

src/js/validator/hslColor.js

@@ -0,0 +1,26 @@
+(function($) {
+    $.fn.bootstrapValidator.i18n.hslColor = $.extend($.fn.bootstrapValidator.i18n.hslColor || {}, {
+        'default': 'Please enter a valid hsl color'
+    });
+
+    $.fn.bootstrapValidator.validators.hslColor = {
+
+        /**
+         * Return true if the input value is a valid hsl() 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();
+            if (value === '') {
+                return true;
+            }
+            return /^hsl\((\s*(-?\d+)\s*,)(\s*(\b(0?\d{1,2}|100)\b%)\s*,)(\s*(\b(0?\d{1,2}|100)\b%)\s*)\)$/.test(value);
+        }
+    };
+}(window.jQuery));
+

test/spec.js

@@ -3531,6 +3531,122 @@ describe('greaterThan', function() {
     });
 });
 
+describe('hslColor', function() {
+
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="rbgColorForm">',
+                    '<div class="form-group">',
+                        '<input type="text" name="hsl" data-bv-hslcolor />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#rbgColorForm').bootstrapValidator();
+
+        this.bv          = $('#rbgColorForm').data('bootstrapValidator');
+        this.$hslColor = this.bv.getFieldElements('hsl');
+    });
+
+    afterEach(function() {
+        $('#rbgColorForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+    it('accept hsl()', function() {
+        this.$hslColor.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept spaces around values', function() {
+        this.$hslColor.val('hsl( 120 , 50% , 50% )');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept multiple spaces around values', function() {
+        this.$hslColor.val('hsl(  120,  50%,       50%  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept negative hue value', function() {
+        this.$hslColor.val('hsl(-120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept hue values larger than 360', function() {
+        this.$hslColor.val('hsl(480,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('reject negative saturation value', function() {
+        this.$hslColor.val('hsl(10,-50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject negative lightness', function() {
+        this.$hslColor.val('hsl(10,50%,-50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('require hsl()', function() {
+        this.$hslColor.val('120,50%,50%');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject percentages above 100%', function() {
+        this.$hslColor.val('hsl(120,100%,101%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject space between hsl and (', function() {
+        this.$hslColor.val('hsl (120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject leading space', function() {
+        this.$hslColor.val(' hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject trailing space', function() {
+        this.$hslColor.val('hsl(120,50%,50%) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject percentages in hue value', function() {
+        this.$hslColor.val('hsl(50%, 50%, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject integers in saturation value', function() {
+        this.$hslColor.val('hsl(120, 50, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject integers in lightness value', function() {
+        this.$hslColor.val('hsl(120, 50%, 100)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+});
+
 describe('iban', function() {
     beforeEach(function() {
         $([

test/spec/validator/hslColor.js

@@ -0,0 +1,115 @@
+describe('hslColor', function() {
+
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="rbgColorForm">',
+                    '<div class="form-group">',
+                        '<input type="text" name="hsl" data-bv-hslcolor />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#rbgColorForm').bootstrapValidator();
+
+        this.bv          = $('#rbgColorForm').data('bootstrapValidator');
+        this.$hslColor = this.bv.getFieldElements('hsl');
+    });
+
+    afterEach(function() {
+        $('#rbgColorForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+    it('accept hsl()', function() {
+        this.$hslColor.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept spaces around values', function() {
+        this.$hslColor.val('hsl( 120 , 50% , 50% )');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept multiple spaces around values', function() {
+        this.$hslColor.val('hsl(  120,  50%,       50%  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept negative hue value', function() {
+        this.$hslColor.val('hsl(-120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('accept hue values larger than 360', function() {
+        this.$hslColor.val('hsl(480,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toBeTruthy();
+    });
+
+    it('reject negative saturation value', function() {
+        this.$hslColor.val('hsl(10,-50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject negative lightness', function() {
+        this.$hslColor.val('hsl(10,50%,-50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('require hsl()', function() {
+        this.$hslColor.val('120,50%,50%');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject percentages above 100%', function() {
+        this.$hslColor.val('hsl(120,100%,101%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject space between hsl and (', function() {
+        this.$hslColor.val('hsl (120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject leading space', function() {
+        this.$hslColor.val(' hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject trailing space', function() {
+        this.$hslColor.val('hsl(120,50%,50%) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject percentages in hue value', function() {
+        this.$hslColor.val('hsl(50%, 50%, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject integers in saturation value', function() {
+        this.$hslColor.val('hsl(120, 50, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+    it('reject integers in lightness value', function() {
+        this.$hslColor.val('hsl(120, 50%, 100)');
+        this.bv.validate();
+        expect(this.bv.isValidField('hsl')).toEqual(false);
+    });
+
+});