#41: Disable submit button on successful form submit

CHANGELOG.md

@@ -7,6 +7,7 @@ __New features__:
 * [#44: Rewrite entirely using Deferred](https://github.com/nghuuphuoc/bootstrapvalidator/issues/44)
 * #26, #27, #67: Add choice validator
 * [#36, #58: Add method to validate form manually](https://github.com/nghuuphuoc/bootstrapvalidator/issues/58)
+* [#41: Disable submit button on successful form submit](https://github.com/nghuuphuoc/bootstrapvalidator/issues/41)
 * [#42: Add submit button to ```submitHandler()``` parameter](https://github.com/nghuuphuoc/bootstrapvalidator/issues/42)
 * [#48: Add optional feedback icons](https://github.com/nghuuphuoc/bootstrapvalidator/issues/48)
 * [#64: Support Danish zip code](https://github.com/nghuuphuoc/bootstrapvalidator/issues/64)

demo/index.html

@@ -176,7 +176,7 @@ $(document).ready(function() {
     $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
 
     $('#defaultForm').bootstrapValidator({
-//        live: 'submitted',
+        live: 'disabled',
         message: 'This value is not valid',
         feedbackIcons: true,
         fields: {

dist/js/bootstrapValidator.js

@@ -189,9 +189,6 @@
         _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(f) {
                         var fields = that.getFieldElements(f);
@@ -209,6 +206,20 @@
         },
 
         /**
+         * Disable/Enable submit buttons
+         *
+         * @param {Boolean} disabled
+         */
+        _disableSubmitButtons: function(disabled) {
+            if (!disabled) {
+                this.$form.find(this.options.submitButtons).removeAttr('disabled');
+            } else if (this.options.live != 'disabled') {
+                // Don't disable if the live validating mode is disabled
+                this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
+            }
+        },
+
+        /**
          * Called when all validations are completed
          */
         _submit: function() {
@@ -223,9 +234,12 @@
                     this.getFieldElements(this.invalidField).focus();
                 }
 
+                this._disableSubmitButtons(false);
                 return;
             }
 
+            this._disableSubmitButtons(true);
+
             // Call the custom submission if enabled
             if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
                 this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
@@ -255,6 +269,8 @@
             if (!this.options.fields) {
                 return this;
             }
+            this._disableSubmitButtons(true);
+
             for (var field in this.options.fields) {
                 this.validateField(field);
             }
@@ -294,7 +310,6 @@
                 }
 
                 $.when(validateResult).then(function(isValid) {
-                    that.results[field][validatorName] = isValid;
                     if (isValid) {
                         that.removeError($field, validatorName);
                     } else {
@@ -313,7 +328,7 @@
             var field, validatorName;
             for (field in this.results) {
                 for (validatorName in this.results[field]) {
-                    if (!this.results[field][validatorName]) {
+                    if (this.results[field][validatorName] !== true) {
                         this.invalidField = field;
                         return false;
                     }
@@ -335,6 +350,9 @@
                 message   = validator.message || this.options.message,
                 $parent   = $field.parents('.form-group');
 
+            this.results[field][validatorName] = false;
+            this._disableSubmitButtons(true);
+
             $parent
                 // Add has-error class to parent element
                 .removeClass('has-success')
@@ -345,7 +363,7 @@
                     .show();
 
             if (this.options.feedbackIcons) {
-                // Show feedback icon
+                // Show "error" icon
                 $parent
                     .find('.form-control-feedback')
                         .removeClass('glyphicon-ok')
@@ -364,6 +382,8 @@
                 $errors = $parent.find('.help-block[data-bs-validator]'),
                 field   = $field.attr('name');
 
+            this.results[field][validatorName] = true;
+
             // Hide error element
             $errors
                 .filter('[data-bs-validator="' + validatorName + '"]')
@@ -388,6 +408,10 @@
                             .show();
                 }
             }
+
+            if (this.isValid()) {
+                this._disableSubmitButtons(false);
+            }
         }
     };
 

src/js/bootstrapValidator.js

@@ -188,9 +188,6 @@
         _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(f) {
                         var fields = that.getFieldElements(f);
@@ -208,6 +205,20 @@
         },
 
         /**
+         * Disable/Enable submit buttons
+         *
+         * @param {Boolean} disabled
+         */
+        _disableSubmitButtons: function(disabled) {
+            if (!disabled) {
+                this.$form.find(this.options.submitButtons).removeAttr('disabled');
+            } else if (this.options.live != 'disabled') {
+                // Don't disable if the live validating mode is disabled
+                this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
+            }
+        },
+
+        /**
          * Called when all validations are completed
          */
         _submit: function() {
@@ -222,9 +233,12 @@
                     this.getFieldElements(this.invalidField).focus();
                 }
 
+                this._disableSubmitButtons(false);
                 return;
             }
 
+            this._disableSubmitButtons(true);
+
             // Call the custom submission if enabled
             if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
                 this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
@@ -254,6 +268,8 @@
             if (!this.options.fields) {
                 return this;
             }
+            this._disableSubmitButtons(true);
+
             for (var field in this.options.fields) {
                 this.validateField(field);
             }
@@ -293,7 +309,6 @@
                 }
 
                 $.when(validateResult).then(function(isValid) {
-                    that.results[field][validatorName] = isValid;
                     if (isValid) {
                         that.removeError($field, validatorName);
                     } else {
@@ -312,7 +327,7 @@
             var field, validatorName;
             for (field in this.results) {
                 for (validatorName in this.results[field]) {
-                    if (!this.results[field][validatorName]) {
+                    if (this.results[field][validatorName] !== true) {
                         this.invalidField = field;
                         return false;
                     }
@@ -334,6 +349,9 @@
                 message   = validator.message || this.options.message,
                 $parent   = $field.parents('.form-group');
 
+            this.results[field][validatorName] = false;
+            this._disableSubmitButtons(true);
+
             $parent
                 // Add has-error class to parent element
                 .removeClass('has-success')
@@ -344,7 +362,7 @@
                     .show();
 
             if (this.options.feedbackIcons) {
-                // Show feedback icon
+                // Show "error" icon
                 $parent
                     .find('.form-control-feedback')
                         .removeClass('glyphicon-ok')
@@ -363,6 +381,8 @@
                 $errors = $parent.find('.help-block[data-bs-validator]'),
                 field   = $field.attr('name');
 
+            this.results[field][validatorName] = true;
+
             // Hide error element
             $errors
                 .filter('[data-bs-validator="' + validatorName + '"]')
@@ -387,6 +407,10 @@
                             .show();
                 }
             }
+
+            if (this.isValid()) {
+                this._disableSubmitButtons(false);
+            }
         }
     };