#42: Add submit button to submitHandler() parameter

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)
+* [#42: Add submit button to ```submitHandler()``` parameter](https://github.com/nghuuphuoc/bootstrapvalidator/issues/42)
 * [#64: Support Danish zip code](https://github.com/nghuuphuoc/bootstrapvalidator/issues/64)
 * [#65: Support Sweden zip code](https://github.com/nghuuphuoc/bootstrapvalidator/issues/64)
 * [#70: Support custom grid columns](https://github.com/nghuuphuoc/bootstrapvalidator/issues/70)

README.md

@@ -79,8 +79,9 @@ $(document).ready(function() {
         // The handler has two arguments
         // - validator is the instance of BootstrapValidator
         // - form is jQuery object representing the current form
+        // - submitButton is jQuery object representing the submit button which is clicked
         // By default, submitHandler is null
-        submitHandler: function(validator, form) {
+        submitHandler: function(validator, form, submitButton) {
         },
 
         // Live validating. Can be one of 3 values:

demo/submitHandler.html

@@ -60,7 +60,7 @@
     $(document).ready(function() {
         $('#defaultForm').bootstrapValidator({
             message: 'This value is not valid',
-            submitHandler: function(validator, form) {
+            submitHandler: function(validator, form, submitButton) {
                 // validator is the BootstrapValidator instance
                 // form is the jQuery object present the current form
                 form.find('.alert').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('username').val()).show();

dist/js/bootstrapValidator.js

@@ -14,14 +14,11 @@
         this.$form   = $(form);
         this.options = $.extend({}, BootstrapValidator.DEFAULT_OPTIONS, options);
 
-        // Array of deferred
-        this._dfds   = {};
+        this.dfds    = {};      // Array of deferred
+        this.results = {};      // Validating results
 
-        // First invalid field
-        this._firstInvalidField = null;
-
-        // Validating results
-        this._results = {};
+        this.invalidField  = null;  // First invalid field
+        this.$submitButton = null;  // The submit button which is clicked to submit form
 
         this._init();
     };
@@ -38,6 +35,10 @@
         // Change it if you use custom grid with different number of columns
         columns: 12,
 
+        // The submit buttons selector
+        // These buttons will be disabled when the form input are invalid
+        submitButtons: 'button[type="submit"]',
+
         // The custom submit handler
         // It will prevent the form from the default submission
         //
@@ -80,6 +81,12 @@
                     that.validate();
                 });
 
+            this.$form
+                .find(this.options.submitButtons)
+                .on('click', function() {
+                    that.$submitButton = $(this);
+                });
+
             for (var field in this.options.fields) {
                 this._initField(field);
             }
@@ -97,8 +104,8 @@
                 return;
             }
 
-            this._dfds[field]    = {};
-            this._results[field] = {};
+            this.dfds[field]    = {};
+            this.results[field] = {};
 
             var fields = this.$form.find('[name="' + field + '"]');
 
@@ -107,7 +114,7 @@
                 || (fields.length == 1 && fields.is(':disabled')))  // ... disabled field
             {
                 delete this.options.fields[field];
-                delete this._dfds[field];
+                delete this.dfds[field];
                 return;
             }
 
@@ -148,7 +155,7 @@
                         continue;
                     }
 
-                    this._results[field][validatorName] = null;
+                    this.results[field][validatorName] = null;
                     $('<small/>')
                         .css('display', 'none')
                         .attr('data-bs-validator', validatorName)
@@ -196,8 +203,8 @@
                 }
 
                 // Focus to the first invalid field
-                if (this._firstInvalidField) {
-                    this.getFieldElements(this._firstInvalidField).focus();
+                if (this.invalidField) {
+                    this.getFieldElements(this.invalidField).focus();
                 }
 
                 return;
@@ -205,7 +212,7 @@
 
             // Call the custom submission if enabled
             if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
-                this.options.submitHandler.call(this, this, this.$form);
+                this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
             } else {
                 // Submit form
                 this.$form.off('submit.bootstrapValidator').submit();
@@ -253,16 +260,16 @@
                 validatorName,
                 validateResult;
             for (validatorName in validators) {
-                if (this._dfds[field][validatorName]) {
-                    this._dfds[field][validatorName].reject();
+                if (this.dfds[field][validatorName]) {
+                    this.dfds[field][validatorName].reject();
                 }
 
                 validateResult = $.fn.bootstrapValidator.validators[validatorName].validate(this, $field, validators[validatorName]);
                 if ('object' == typeof validateResult) {
-                    this._dfds[field][validatorName] = validateResult;
+                    this.dfds[field][validatorName] = validateResult;
                     validateResult.done(function(isValid, v) {
                         // v is validator name
-                        delete that._dfds[field][v];
+                        delete that.dfds[field][v];
                         /*
                         if (isValid) {
                             that._submit();
@@ -271,7 +278,7 @@
                 }
 
                 $.when(validateResult).then(function(isValid) {
-                    that._results[field][validatorName] = isValid;
+                    that.results[field][validatorName] = isValid;
                     if (isValid) {
                         that.removeError($field, validatorName);
                     } else {
@@ -288,10 +295,10 @@
          */
         isValid: function() {
             var field, validatorName;
-            for (field in this._results) {
-                for (validatorName in this._results[field]) {
-                    if (!this._results[field][validatorName]) {
-                        this._firstInvalidField = field;
+            for (field in this.results) {
+                for (validatorName in this.results[field]) {
+                    if (!this.results[field][validatorName]) {
+                        this.invalidField = field;
                         return false;
                     }
                 }

src/js/bootstrapValidator.js

@@ -13,14 +13,11 @@
         this.$form   = $(form);
         this.options = $.extend({}, BootstrapValidator.DEFAULT_OPTIONS, options);
 
-        // Array of deferred
-        this._dfds   = {};
+        this.dfds    = {};      // Array of deferred
+        this.results = {};      // Validating results
 
-        // First invalid field
-        this._firstInvalidField = null;
-
-        // Validating results
-        this._results = {};
+        this.invalidField  = null;  // First invalid field
+        this.$submitButton = null;  // The submit button which is clicked to submit form
 
         this._init();
     };
@@ -37,6 +34,10 @@
         // Change it if you use custom grid with different number of columns
         columns: 12,
 
+        // The submit buttons selector
+        // These buttons will be disabled when the form input are invalid
+        submitButtons: 'button[type="submit"]',
+
         // The custom submit handler
         // It will prevent the form from the default submission
         //
@@ -79,6 +80,12 @@
                     that.validate();
                 });
 
+            this.$form
+                .find(this.options.submitButtons)
+                .on('click', function() {
+                    that.$submitButton = $(this);
+                });
+
             for (var field in this.options.fields) {
                 this._initField(field);
             }
@@ -96,8 +103,8 @@
                 return;
             }
 
-            this._dfds[field]    = {};
-            this._results[field] = {};
+            this.dfds[field]    = {};
+            this.results[field] = {};
 
             var fields = this.$form.find('[name="' + field + '"]');
 
@@ -106,7 +113,7 @@
                 || (fields.length == 1 && fields.is(':disabled')))  // ... disabled field
             {
                 delete this.options.fields[field];
-                delete this._dfds[field];
+                delete this.dfds[field];
                 return;
             }
 
@@ -147,7 +154,7 @@
                         continue;
                     }
 
-                    this._results[field][validatorName] = null;
+                    this.results[field][validatorName] = null;
                     $('<small/>')
                         .css('display', 'none')
                         .attr('data-bs-validator', validatorName)
@@ -195,8 +202,8 @@
                 }
 
                 // Focus to the first invalid field
-                if (this._firstInvalidField) {
-                    this.getFieldElements(this._firstInvalidField).focus();
+                if (this.invalidField) {
+                    this.getFieldElements(this.invalidField).focus();
                 }
 
                 return;
@@ -204,7 +211,7 @@
 
             // Call the custom submission if enabled
             if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
-                this.options.submitHandler.call(this, this, this.$form);
+                this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
             } else {
                 // Submit form
                 this.$form.off('submit.bootstrapValidator').submit();
@@ -252,16 +259,16 @@
                 validatorName,
                 validateResult;
             for (validatorName in validators) {
-                if (this._dfds[field][validatorName]) {
-                    this._dfds[field][validatorName].reject();
+                if (this.dfds[field][validatorName]) {
+                    this.dfds[field][validatorName].reject();
                 }
 
                 validateResult = $.fn.bootstrapValidator.validators[validatorName].validate(this, $field, validators[validatorName]);
                 if ('object' == typeof validateResult) {
-                    this._dfds[field][validatorName] = validateResult;
+                    this.dfds[field][validatorName] = validateResult;
                     validateResult.done(function(isValid, v) {
                         // v is validator name
-                        delete that._dfds[field][v];
+                        delete that.dfds[field][v];
                         /*
                         if (isValid) {
                             that._submit();
@@ -270,7 +277,7 @@
                 }
 
                 $.when(validateResult).then(function(isValid) {
-                    that._results[field][validatorName] = isValid;
+                    that.results[field][validatorName] = isValid;
                     if (isValid) {
                         that.removeError($field, validatorName);
                     } else {
@@ -287,10 +294,10 @@
          */
         isValid: function() {
             var field, validatorName;
-            for (field in this._results) {
-                for (validatorName in this._results[field]) {
-                    if (!this._results[field][validatorName]) {
-                        this._firstInvalidField = field;
+            for (field in this.results) {
+                for (validatorName in this.results[field]) {
+                    if (!this.results[field][validatorName]) {
+                        this.invalidField = field;
                         return false;
                     }
                 }