Merge branch 'feature_validator_colors' of https://github.com/emilchristensen/bootstrapvalidator into emilchristensen-feature_validator_colors

Conflicts:
	dist/css/bootstrapValidator.min.css
	dist/js/bootstrapValidator.js
	dist/js/bootstrapValidator.min.js

demo/validators.html

@@ -88,13 +88,20 @@
                             </div>
 
                             <div class="form-group">
-                                <label class="col-lg-3 control-label">Hex color</label>
+                                <label class="col-lg-3 control-label">Hex, RGB, HSL, Keyword color</label>
                                 <div class="col-lg-3">
                                     <input type="text" class="form-control" name="color" />
                                 </div>
                             </div>
 
                             <div class="form-group">
+                                <label class="col-lg-3 control-label">All colors</label>
+                                <div class="col-lg-3">
+                                    <input type="text" class="form-control" name="colorAll" />
+                                </div>
+                            </div>
+
+                            <div class="form-group">
                                 <label class="col-lg-3 control-label">US zip code</label>
                                 <div class="col-lg-3">
                                     <input type="text" class="form-control" name="zipCode" />
@@ -219,11 +226,17 @@ $(document).ready(function() {
             },
             color: {
                 validators: {
-                    hexColor: {
-                        message: 'The input is not a valid hex color'
+                    color: {
+                        type: ['hex', 'rgb', 'hsl', 'keyword'],
+                        message: 'Must be a valid %s color'
                     }
                 }
             },
+            colorAll: {
+                validators: {
+                    color: { }
+                }
+            },
             zipCode: {
                 validators: {
                     zipCode: {

src/js/validator/hexColor.js

@@ -18,11 +18,7 @@
          * @returns {Boolean}
          */
         validate: function(validator, $field, options) {
-            var value = $field.val();
-            if (value === '') {
-                return true;
-            }
-            return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
+            return $.fn.bootstrapValidator.validators.color._hexColor(validator, $field, options);
         }
     };
 }(window.jQuery));

test/spec.js

@@ -2229,6 +2229,733 @@ describe('callback', function() {
     });
 });
 
+describe('color', function() {
+
+    beforeEach(function() {
+        $([
+            '<div class="container">',
+                '<form class="form-horizontal" id="colorForm">',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="color" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorMultiple" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorHex" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorRgb" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorRgba" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorHsl" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorHsla" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorKeyword" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorCustomMessage" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorSingleCustomMessage" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorMultipleCustomMessage" />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n')).appendTo('body');
+
+        $('#colorForm').bootstrapValidator({
+            fields: {
+                color: {
+                    validators: {
+                        color: { }
+                    }
+                },
+                colorMultiple: {
+                    validators: {
+                        color: {
+                            type: [
+                                "hex",
+                                "rgb"
+                            ]
+                        }
+                    }
+                },
+                colorMultipleCustomMessage: {
+                    validators: {
+                        color: {
+                            type: [
+                                "hex",
+                                "rgb"
+                            ],
+                            message: "This is a custom validation message for %s"
+                        }
+                    }
+                },
+                colorSingleCustomMessage: {
+                    validators: {
+                        color: {
+                            type: ["rgb"],
+                            message: "This is a custom validation message for %s"
+                        }
+                    }
+                },
+                colorCustomMessage: {
+                    validators: {
+                        color: {
+                            message: "This is a custom validation message for all colors"
+                        }
+                    }
+                },
+                colorHex: {
+                    validators: {
+                        color: {
+                            type: ["hex"]
+                        }
+                    }
+                },
+                colorRgb: {
+                    validators: {
+                        color: {
+                            type: ["rgb"]
+                        }
+                    }
+                },
+                colorRgba: {
+                    validators: {
+                        color: {
+                            type: ["rgba"]
+                        }
+                    }
+                },
+                colorHsl: {
+                    validators: {
+                        color: {
+                            type: ["hsl"]
+                        }
+                    }
+                },
+                colorHsla: {
+                    validators: {
+                        color: {
+                            type: ["hsla"]
+                        }
+                    }
+                },
+                colorKeyword: {
+                    validators: {
+                        color: {
+                            type: ["keyword"]
+                        }
+                    }
+                }
+            }
+        });
+
+        this.bv = $('#colorForm').data('bootstrapValidator');
+        this.$color = this.bv.getFieldElements('color');
+        this.$colorMultiple = this.bv.getFieldElements('colorMultiple');
+        this.$colorHex = this.bv.getFieldElements('colorHex');
+        this.$colorRgb = this.bv.getFieldElements('colorRgb');
+        this.$colorRgba = this.bv.getFieldElements('colorRgba');
+        this.$colorHsl = this.bv.getFieldElements('colorHsl');
+        this.$colorHsla = this.bv.getFieldElements('colorHsla');
+        this.$colorKeyword = this.bv.getFieldElements('colorKeyword');
+        this.$colorMultipleCustomMessage = this.bv.getFieldElements('colorMultipleCustomMessage');
+        this.$colorSingleCustomMessage = this.bv.getFieldElements('colorSingleCustomMessage');
+        this.$colorCustomMessage = this.bv.getFieldElements('colorCustomMessage');
+    });
+
+    afterEach(function() {
+        $('#colorForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+
+
+/* First run all color tests in the in color field*/
+    // Start hsla() tests
+    it('Run hsla() test suite on hsla only field', function() {
+        this.$colorHsla.val('hsla(120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla( 120 , 50% , 50%, 1 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(  120,  50%,       50% ,   1  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(-120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(480,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,2)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,-1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,1.000000000001)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,-0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,2.3)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(10,-50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(10,50%,-50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('120,50%,50%,1');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,100%,101%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla (120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val(' hsla(120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,50%,1) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(50%, 50%, 100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120, 50, 100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120, 50%, 100,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+    });
+
+
+    // Start hsl() tests
+    it('Run hsl() test suite on hsl only field', function() {
+        this.$colorHsl.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl( 120 , 50% , 50% )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(  120,  50%,       50%  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(-120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(480,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(10,-50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(10,50%,-50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('120,50%,50%');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120,100%,101%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl (120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val(' hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120,50%,50%) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(50%, 50%, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120, 50, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120, 50%, 100)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+    });
+
+    // Start keyword test
+    it('Run keyword test suite on keyword only field', function() {
+        this.$colorKeyword.val('transparent');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('transparent');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('blueviolet red');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('shady');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('blueish');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+    });
+
+
+    // Start rgba() test
+    it('Run rgba() test suite on rgba only field', function() {
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba( 255 , 255 , 255 , 1 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(  255  ,  255    ,       255 ,  1     )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,2)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,-1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1.000000000001)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,-0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,2.3)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(-10,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(-10%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('255,255,255,1');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,256),1');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,101%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba (255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val(' rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+    });
+
+    // Start rgb() test
+    it('Run rgb() test suite on rgb only field', function() {
+        this.$colorRgb.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb( 255 , 255 , 255 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(  255,  255,       255  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(100%,100%,100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(-10,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(-10%,100%,100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('255,255,255');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,256)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(100%,100%,101%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb (255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val(' rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,255) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+    });
+
+/* Run individual tests */
+    it('Individual field keyword: accept keyword', function() {
+        this.$colorKeyword.val('blue');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toBeTruthy();
+    });
+    it('Individual field keyword: reject rgb', function() {
+        this.$colorKeyword.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+    });
+
+    it('Individual field hex: accept 6 char hex', function() {
+        this.$colorHex.val('#0000FF');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHex')).toBeTruthy();
+    });
+    it('Individual field hex: accept 3 char hex', function() {
+        this.$colorHex.val('#00F');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHex')).toBeTruthy();
+    });
+    it('Individual field hex: reject keyword', function() {
+        this.$colorHex.val('blue');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHex')).toEqual(false);
+    });
+
+    it('Individual field rgb(): accept rgb()', function() {
+        this.$colorRgb.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+    });
+    it('Individual field rgb(): reject hex', function() {
+        this.$colorRgb.val('#0000FF');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+    });
+
+    it('Individual field rgba(): accept rgba()', function() {
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+    });
+    it('Individual field rgba(): reject rgb()', function() {
+        this.$colorRgba.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+    });
+
+    it('Individual field hsl(): accept hsl()', function() {
+        this.$colorHsl.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+    });
+    it('Individual field hsl(): reject rgba()', function() {
+        this.$colorHsl.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+    });
+
+    it('Individual field hsla(): accept hsla()', function() {
+        this.$colorHsla.val('hsla(120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+    });
+    it('Individual field hsla(): reject hsl()', function() {
+        this.$colorHsla.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+    });
+
+/* Run validation message tests */
+    it('Validation message tests', function() {
+        this.$color.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('color')).toEqual(false);
+        expect(this.bv.getMessages(this.$color, 'color')[0]).toEqual($.fn.bootstrapValidator.i18n.color.default);
+
+        this.bv.resetForm();
+        this.$colorCustomMessage.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorCustomMessage')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorCustomMessage, 'color')[0]).toEqual("This is a custom validation message for all colors");
+
+        this.bv.resetForm();
+        this.$colorMultiple.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorMultiple')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorMultiple, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( $.fn.bootstrapValidator.i18n.color.type , "hex, rgb"));
+
+        this.bv.resetForm();
+        this.$colorMultipleCustomMessage.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorMultipleCustomMessage')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorMultipleCustomMessage, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( "This is a custom validation message for %s" , "hex, rgb"));
+
+        this.bv.resetForm();
+        this.$colorRgb.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorRgb, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( $.fn.bootstrapValidator.i18n.color.type , "rgb"));
+
+        this.bv.resetForm();
+        this.$colorSingleCustomMessage.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorSingleCustomMessage')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorSingleCustomMessage, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( "This is a custom validation message for %s" , "rgb"));
+
+
+    });
+});
+
 describe('creditCard', function() {
     // Get the fake credit card number at http://www.getcreditcardnumbers.com/
 

test/spec/validator/color.js

@@ -0,0 +1,726 @@
+describe('color', function() {
+
+    beforeEach(function() {
+        $([
+            '<div class="container">',
+                '<form class="form-horizontal" id="colorForm">',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="color" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorMultiple" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorHex" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorRgb" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorRgba" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorHsl" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorHsla" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorKeyword" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorCustomMessage" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorSingleCustomMessage" />',
+                    '</div>',
+                    '<div class="form-group">',
+                        '<input type="text" class="form-control" name="colorMultipleCustomMessage" />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n')).appendTo('body');
+
+        $('#colorForm').bootstrapValidator({
+            fields: {
+                color: {
+                    validators: {
+                        color: { }
+                    }
+                },
+                colorMultiple: {
+                    validators: {
+                        color: {
+                            type: [
+                                "hex",
+                                "rgb"
+                            ]
+                        }
+                    }
+                },
+                colorMultipleCustomMessage: {
+                    validators: {
+                        color: {
+                            type: [
+                                "hex",
+                                "rgb"
+                            ],
+                            message: "This is a custom validation message for %s"
+                        }
+                    }
+                },
+                colorSingleCustomMessage: {
+                    validators: {
+                        color: {
+                            type: ["rgb"],
+                            message: "This is a custom validation message for %s"
+                        }
+                    }
+                },
+                colorCustomMessage: {
+                    validators: {
+                        color: {
+                            message: "This is a custom validation message for all colors"
+                        }
+                    }
+                },
+                colorHex: {
+                    validators: {
+                        color: {
+                            type: ["hex"]
+                        }
+                    }
+                },
+                colorRgb: {
+                    validators: {
+                        color: {
+                            type: ["rgb"]
+                        }
+                    }
+                },
+                colorRgba: {
+                    validators: {
+                        color: {
+                            type: ["rgba"]
+                        }
+                    }
+                },
+                colorHsl: {
+                    validators: {
+                        color: {
+                            type: ["hsl"]
+                        }
+                    }
+                },
+                colorHsla: {
+                    validators: {
+                        color: {
+                            type: ["hsla"]
+                        }
+                    }
+                },
+                colorKeyword: {
+                    validators: {
+                        color: {
+                            type: ["keyword"]
+                        }
+                    }
+                }
+            }
+        });
+
+        this.bv = $('#colorForm').data('bootstrapValidator');
+        this.$color = this.bv.getFieldElements('color');
+        this.$colorMultiple = this.bv.getFieldElements('colorMultiple');
+        this.$colorHex = this.bv.getFieldElements('colorHex');
+        this.$colorRgb = this.bv.getFieldElements('colorRgb');
+        this.$colorRgba = this.bv.getFieldElements('colorRgba');
+        this.$colorHsl = this.bv.getFieldElements('colorHsl');
+        this.$colorHsla = this.bv.getFieldElements('colorHsla');
+        this.$colorKeyword = this.bv.getFieldElements('colorKeyword');
+        this.$colorMultipleCustomMessage = this.bv.getFieldElements('colorMultipleCustomMessage');
+        this.$colorSingleCustomMessage = this.bv.getFieldElements('colorSingleCustomMessage');
+        this.$colorCustomMessage = this.bv.getFieldElements('colorCustomMessage');
+    });
+
+    afterEach(function() {
+        $('#colorForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+
+
+/* First run all color tests in the in color field*/
+    // Start hsla() tests
+    it('Run hsla() test suite on hsla only field', function() {
+        this.$colorHsla.val('hsla(120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla( 120 , 50% , 50%, 1 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(  120,  50%,       50% ,   1  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(-120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(480,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,2)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,-1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,1.000000000001)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,-0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,100%,2.3)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(10,-50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(10,50%,-50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('120,50%,50%,1');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,100%,101%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla (120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val(' hsla(120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120,50%,50%,1) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(50%, 50%, 100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120, 50, 100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsla.val('hsla(120, 50%, 100,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+    });
+
+
+    // Start hsl() tests
+    it('Run hsl() test suite on hsl only field', function() {
+        this.$colorHsl.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl( 120 , 50% , 50% )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(  120,  50%,       50%  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(-120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(480,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(10,-50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(10,50%,-50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('120,50%,50%');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120,100%,101%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl (120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val(' hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120,50%,50%) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(50%, 50%, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120, 50, 100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorHsl.val('hsl(120, 50%, 100)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+    });
+
+    // Start keyword test
+    it('Run keyword test suite on keyword only field', function() {
+        this.$colorKeyword.val('transparent');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('transparent');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('blueviolet red');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('shady');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorKeyword.val('blueish');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+    });
+
+
+    // Start rgba() test
+    it('Run rgba() test suite on rgba only field', function() {
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba( 255 , 255 , 255 , 1 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(  255  ,  255    ,       255 ,  1     )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,0)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,.524141)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,100%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,2)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,-1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1.000000000001)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,-0.5)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,2.3)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(-10,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(-10%,100%,100%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('255,255,255,1');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,256),1');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(100%,100%,101%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba (255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val(' rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgba.val('rgba(255,255,255,1) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+    });
+
+    // Start rgb() test
+    it('Run rgb() test suite on rgb only field', function() {
+        this.$colorRgb.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb( 255 , 255 , 255 )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(  255,  255,       255  )');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(100%,100%,100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(-10,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(-10%,100%,100%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('255,255,255');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,256)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(100%,100%,101%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb (255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val(' rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$colorRgb.val('rgb(255,255,255) ');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+    });
+
+/* Run individual tests */
+    it('Individual field keyword: accept keyword', function() {
+        this.$colorKeyword.val('blue');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toBeTruthy();
+    });
+    it('Individual field keyword: reject rgb', function() {
+        this.$colorKeyword.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorKeyword')).toEqual(false);
+    });
+
+    it('Individual field hex: accept 6 char hex', function() {
+        this.$colorHex.val('#0000FF');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHex')).toBeTruthy();
+    });
+    it('Individual field hex: accept 3 char hex', function() {
+        this.$colorHex.val('#00F');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHex')).toBeTruthy();
+    });
+    it('Individual field hex: reject keyword', function() {
+        this.$colorHex.val('blue');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHex')).toEqual(false);
+    });
+
+    it('Individual field rgb(): accept rgb()', function() {
+        this.$colorRgb.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toBeTruthy();
+    });
+    it('Individual field rgb(): reject hex', function() {
+        this.$colorRgb.val('#0000FF');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+    });
+
+    it('Individual field rgba(): accept rgba()', function() {
+        this.$colorRgba.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toBeTruthy();
+    });
+    it('Individual field rgba(): reject rgb()', function() {
+        this.$colorRgba.val('rgb(255,255,255)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgba')).toEqual(false);
+    });
+
+    it('Individual field hsl(): accept hsl()', function() {
+        this.$colorHsl.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toBeTruthy();
+    });
+    it('Individual field hsl(): reject rgba()', function() {
+        this.$colorHsl.val('rgba(255,255,255,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsl')).toEqual(false);
+    });
+
+    it('Individual field hsla(): accept hsla()', function() {
+        this.$colorHsla.val('hsla(120,50%,50%,1)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toBeTruthy();
+    });
+    it('Individual field hsla(): reject hsl()', function() {
+        this.$colorHsla.val('hsl(120,50%,50%)');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorHsla')).toEqual(false);
+    });
+
+/* Run validation message tests */
+    it('Validation message tests', function() {
+        this.$color.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('color')).toEqual(false);
+        expect(this.bv.getMessages(this.$color, 'color')[0]).toEqual($.fn.bootstrapValidator.i18n.color.default);
+
+        this.bv.resetForm();
+        this.$colorCustomMessage.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorCustomMessage')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorCustomMessage, 'color')[0]).toEqual("This is a custom validation message for all colors");
+
+        this.bv.resetForm();
+        this.$colorMultiple.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorMultiple')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorMultiple, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( $.fn.bootstrapValidator.i18n.color.type , "hex, rgb"));
+
+        this.bv.resetForm();
+        this.$colorMultipleCustomMessage.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorMultipleCustomMessage')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorMultipleCustomMessage, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( "This is a custom validation message for %s" , "hex, rgb"));
+
+        this.bv.resetForm();
+        this.$colorRgb.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorRgb')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorRgb, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( $.fn.bootstrapValidator.i18n.color.type , "rgb"));
+
+        this.bv.resetForm();
+        this.$colorSingleCustomMessage.val('notacolor');
+        this.bv.validate();
+        expect(this.bv.isValidField('colorSingleCustomMessage')).toEqual(false);
+        expect(this.bv.getMessages(this.$colorSingleCustomMessage, 'color')[0]).toEqual($.fn.bootstrapValidator.helpers.format( "This is a custom validation message for %s" , "rgb"));
+
+
+    });
+});