#8: Add Hex Color validator

demo/validators.html

@@ -66,15 +66,11 @@
                                     <input type="text" class="form-control" name="phoneNumber" />
                                 </div>
                             </div>
-                        </fieldset>
-
-                        <fieldset>
-                            <legend>Other validators</legend>
 
                             <div class="form-group">
-                                <label class="col-lg-3 control-label">Ages</label>
+                                <label class="col-lg-3 control-label">Hex color</label>
                                 <div class="col-lg-3">
-                                    <input type="text" class="form-control" name="ages" />
+                                    <input type="text" class="form-control" name="color" />
                                 </div>
                             </div>
                         </fieldset>
@@ -97,6 +93,17 @@
                             </div>
                         </fieldset>
 
+                        <fieldset>
+                            <legend>Other validators</legend>
+
+                            <div class="form-group">
+                                <label class="col-lg-3 control-label">Ages</label>
+                                <div class="col-lg-3">
+                                    <input type="text" class="form-control" name="ages" />
+                                </div>
+                            </div>
+                        </fieldset>
+
                         <div class="form-group">
                             <div class="col-lg-9 col-lg-offset-3">
                                 <button type="submit" class="btn btn-primary">Sign up</button>
@@ -161,6 +168,13 @@ $(document).ready(function() {
                     }
                 }
             },
+            color: {
+                validator: {
+                    hexColor: {
+                        message: 'The input is not a valid hex color'
+                    }
+                }
+            },
             password: {
                 validator: {
                     notEmpty: {

dist/js/bootstrapvalidate.js

@@ -79,7 +79,7 @@
                 var that         = this,
                     fieldElement = $(foundFields[0]),
                     type         = $(fieldElement).attr('type'),
-                    event        = ('checkbox' == type) ? 'change' : 'keyup';
+                    event        = ('checkbox' == type || 'radio' == type) ? 'change' : 'keyup';
 
                 $(fieldElement)
                     .on(event, function() {
@@ -256,6 +256,25 @@
 }(window.jQuery));
 ;(function($) {
     $.extend($.bootstrapValidator.validator, {
+        hexColor: {
+            /**
+             * Return true if the input value is a valid hex color
+             *
+             * @param {bootstrapValidator} validateInstance Validate plugin instance
+             * @param {HTMLElement} element
+             * @param {Object} options Can consist of the following keys:
+             * - message: The invalid message
+             * @returns {boolean}
+             */
+            validate: function(validateInstance, element, options) {
+                var value = $(element).val();
+                return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
+            }
+        }
+    });
+}(window.jQuery));
+;(function($) {
+    $.extend($.bootstrapValidator.validator, {
         identical: {
             /**
              * Check if input value equals to value of particular one

src/js/validator/hexColor.js

@@ -0,0 +1,19 @@
+(function($) {
+    $.extend($.bootstrapValidator.validator, {
+        hexColor: {
+            /**
+             * Return true if the input value is a valid hex color
+             *
+             * @param {bootstrapValidator} validateInstance Validate plugin instance
+             * @param {HTMLElement} element
+             * @param {Object} options Can consist of the following keys:
+             * - message: The invalid message
+             * @returns {boolean}
+             */
+            validate: function(validateInstance, element, options) {
+                var value = $(element).val();
+                return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
+            }
+        }
+    });
+}(window.jQuery));