#24: Add live option

CHANGELOG.md

@@ -6,6 +6,7 @@ __v0.2.0__
 * Add ```creditCard``` validator
 * Add ```different``` validator
 * #25: The ```regexp``` validator does not work
+* Add ```live``` option
 
 __v0.1.1 (2013-10-17)__
 * Add ```submitButtons``` option

README.md

@@ -54,6 +54,12 @@ $(document).ready(function() {
         submitHandler: function(validator, form) {
         },
 
+        // Live validating. Can be one of 3 values:
+        // - enabled: The plugin validates fields as soon as they are changed
+        // - disabled: Disable the live validating. The error messages are only shown after the form is submitted
+        // - submitted: The live validating is enabled after the form is submitted
+        live: 'enabled',
+
         // The fields which need to be validated
         fields: {
             ...

demo/index.html

@@ -78,6 +78,7 @@ $(document).ready(function() {
 
     $('#defaultForm').bootstrapValidator({
         message: 'This value is not valid',
+        live: 'disabled',
         fields: {
             username: {
                 message: 'The username is not valid',
@@ -146,7 +147,6 @@ $(document).ready(function() {
                         message: 'Wrong answer',
                         callback: function(value, validator) {
                             var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
-                            console.log(sum);
                             return value == sum;
                         }
                     }

dist/js/bootstrapValidator.js

@@ -13,6 +13,11 @@
         this.$form   = $(form);
         this.options = $.extend({}, BootstrapValidator.DEFAULT_OPTIONS, options);
 
+        if ('disabled' == this.options.live) {
+            // The submit buttons have to enabled if the live validating is disabled
+            this.options.submitButtons = null;
+        }
+
         this.invalidFields      = {};
         this.xhrRequests        = {};
         this.numPendingRequests = null;
@@ -42,6 +47,12 @@
         //  }
         submitHandler: null,
 
+        // Live validating. Can be one of 3 values:
+        // - enabled: The plugin validates fields as soon as they are changed
+        // - disabled: Disable the live validating. The error messages are only shown after the form is submitted
+        // - submitted: The live validating is enabled after the form is submitted
+        live: 'enabled',
+
         // Map the field name with validator rules
         fields: null
     };
@@ -76,6 +87,11 @@
                         }
                         if (!that.isValid()) {
                             that.$form.find(that.options.submitButtons).attr('disabled', 'disabled');
+                            if ('submitted' == that.options.live) {
+                                that.options.live = 'enabled';
+                                that._setLiveValidating();
+                            }
+
                             e.preventDefault();
                         } else {
                             if (that.options.submitHandler && 'function' == typeof that.options.submitHandler) {
@@ -89,6 +105,33 @@
             for (var field in this.options.fields) {
                 this._initField(field);
             }
+
+            this._setLiveValidating();
+        },
+
+        /**
+         * Enable live validating
+         */
+        _setLiveValidating: function() {
+            if ('enabled' == this.options.live) {
+                var that = this;
+                // Since this should be called once, I have to disable the live validating mode
+                this.options.live = 'disabled';
+
+                for (var field in this.options.fields) {
+                    (function(field) {
+                        var $field = that.getFieldElement(field);
+                        if ($field) {
+                            var type  = $field.attr('type'),
+                                event = ('checkbox' == type || 'radio' == type || 'SELECT' == $field.get(0).tagName) ? 'change' : 'keyup';
+                            $field.on(event, function() {
+                                that.formSubmited = false;
+                                that.validateField(field);
+                            });
+                        }
+                    })(field);
+                }
+            }
         },
 
         /**
@@ -141,13 +184,6 @@
             } else {
                 $field.data('bootstrapValidator.error', helpBlock.eq(0));
             }
-
-            var type  = $field.attr('type'),
-                event = ('checkbox' == type || 'radio' == type || 'SELECT' == $field.get(0).tagName) ? 'change' : 'keyup';
-            $field.on(event, function() {
-                that.formSubmited = false;
-                that.validateField(field);
-            });
         },
 
         /**
@@ -404,7 +440,8 @@
             return (check % 10) == 0;
         }
     };
-}(window.jQuery));;(function($) {
+}(window.jQuery));
+;(function($) {
     $.fn.bootstrapValidator.validators.different = {
         /**
          * Return true if the input value is different with given field's value

src/js/bootstrapValidator.js

@@ -13,6 +13,11 @@
         this.$form   = $(form);
         this.options = $.extend({}, BootstrapValidator.DEFAULT_OPTIONS, options);
 
+        if ('disabled' == this.options.live) {
+            // The submit buttons have to enabled if the live validating is disabled
+            this.options.submitButtons = null;
+        }
+
         this.invalidFields      = {};
         this.xhrRequests        = {};
         this.numPendingRequests = null;
@@ -42,6 +47,12 @@
         //  }
         submitHandler: null,
 
+        // Live validating. Can be one of 3 values:
+        // - enabled: The plugin validates fields as soon as they are changed
+        // - disabled: Disable the live validating. The error messages are only shown after the form is submitted
+        // - submitted: The live validating is enabled after the form is submitted
+        live: 'enabled',
+
         // Map the field name with validator rules
         fields: null
     };
@@ -76,6 +87,11 @@
                         }
                         if (!that.isValid()) {
                             that.$form.find(that.options.submitButtons).attr('disabled', 'disabled');
+                            if ('submitted' == that.options.live) {
+                                that.options.live = 'enabled';
+                                that._setLiveValidating();
+                            }
+
                             e.preventDefault();
                         } else {
                             if (that.options.submitHandler && 'function' == typeof that.options.submitHandler) {
@@ -89,6 +105,33 @@
             for (var field in this.options.fields) {
                 this._initField(field);
             }
+
+            this._setLiveValidating();
+        },
+
+        /**
+         * Enable live validating
+         */
+        _setLiveValidating: function() {
+            if ('enabled' == this.options.live) {
+                var that = this;
+                // Since this should be called once, I have to disable the live validating mode
+                this.options.live = 'disabled';
+
+                for (var field in this.options.fields) {
+                    (function(field) {
+                        var $field = that.getFieldElement(field);
+                        if ($field) {
+                            var type  = $field.attr('type'),
+                                event = ('checkbox' == type || 'radio' == type || 'SELECT' == $field.get(0).tagName) ? 'change' : 'keyup';
+                            $field.on(event, function() {
+                                that.formSubmited = false;
+                                that.validateField(field);
+                            });
+                        }
+                    })(field);
+                }
+            }
         },
 
         /**
@@ -141,13 +184,6 @@
             } else {
                 $field.data('bootstrapValidator.error', helpBlock.eq(0));
             }
-
-            var type  = $field.attr('type'),
-                event = ('checkbox' == type || 'radio' == type || 'SELECT' == $field.get(0).tagName) ? 'change' : 'keyup';
-            $field.on(event, function() {
-                that.formSubmited = false;
-                that.validateField(field);
-            });
         },
 
         /**

src/js/validator/creditCard.js

@@ -39,4 +39,4 @@
             return (check % 10) == 0;
         }
     };
-}(window.jQuery));
+}(window.jQuery));