Remove submitHandler. Use success.form.bv event instead

CHANGELOG.md

@@ -31,6 +31,34 @@ __Changes__
 * [#42](https://github.com/nghuuphuoc/bootstrapvalidator/issues/42): Remove the submit button from ```submitHandler()```. You can use new ```getSubmitButton()``` method to get the clicked submit button
 * [#109](https://github.com/nghuuphuoc/bootstrapvalidator/issues/109): Remove the ```setLiveMode()``` method
 * ```$.fn.bootstrapValidator.helpers``` renames ```mod_11_10``` to ```mod11And10```, ```mod_37_36``` to ```mod37And36```
+* Remove ```submitHandler()``` option. Use ```success.form.bv``` event instead:
+
+_v0.4.5 and earlier versions_
+```javascript
+$(form).bootstrapValidator({
+    submitHandler: function(form, validator, submitButton) {
+        ...
+    }
+});
+```
+
+_v0.5.0_
+Using ```success.form.bv``` event:
+
+```javascript
+$(form)
+    .bootstrapValidator(options)
+    .on('success.form.bv', function(e) {
+        // Prevent form submission
+        e.preventDefault();
+
+        var $form        = $(e.target),
+            validator    = $form.data('bootstrapValidator'),
+            submitButton = validator.getSubmitButton();
+
+        // Do whatever you want here ...
+    });
+```
 
 __Improvements__
 * [#244](https://github.com/nghuuphuoc/bootstrapvalidator/pull/244): Only enable the submit buttons if all fields are valid, thanks to [@smeagol74](https://github.com/smeagol74)

demo/reset.html

@@ -84,13 +84,54 @@
 
 <script type="text/javascript">
 $(document).ready(function() {
-    $('#defaultForm').bootstrapValidator({
-        feedbackIcons: {
-            valid: 'glyphicon glyphicon-ok',
-            invalid: 'glyphicon glyphicon-remove',
-            validating: 'glyphicon glyphicon-refresh'
-        },
-        submitHandler: function(validator, form, submitButton) {
+    $('#defaultForm')
+        .bootstrapValidator({
+            feedbackIcons: {
+                valid: 'glyphicon glyphicon-ok',
+                invalid: 'glyphicon glyphicon-remove',
+                validating: 'glyphicon glyphicon-refresh'
+            },
+            fields: {
+                firstName: {
+                    validators: {
+                        notEmpty: {
+                            message: 'The first name is required and cannot be empty'
+                        }
+                    }
+                },
+                lastName: {
+                    validators: {
+                        notEmpty: {
+                            message: 'The last name is required and cannot be empty'
+                        }
+                    }
+                },
+                email: {
+                    validators: {
+                        notEmpty: {
+                            message: 'The email address is required and cannot be empty'
+                        },
+                        emailAddress: {
+                            message: 'The input is not a valid email address'
+                        }
+                    }
+                },
+                gender: {
+                    validators: {
+                        notEmpty: {
+                            message: 'The gender is required'
+                        }
+                    }
+                }
+            }
+        })
+        .on('success.form.bv', function(e) {
+            // Prevent submit form
+            e.preventDefault();
+
+            var $form     = $(e.target),
+                validator = $form.data('bootstrapValidator');
+
             // Show the modal
             var fullName = [validator.getFieldElements('firstName').val(),
                             validator.getFieldElements('lastName').val()].join(' ');
@@ -98,45 +139,13 @@ $(document).ready(function() {
                 .find('.welcome').html('Hello ' + fullName).end()
                 .modal('show');
 
-            $('#defaultForm')
+            $form
                 .bootstrapValidator('disableSubmitButtons', false)  // Enable the submit buttons
                 .bootstrapValidator('resetForm', true);             // Reset the form
-        },
-        fields: {
-            firstName: {
-                validators: {
-                    notEmpty: {
-                        message: 'The first name is required and cannot be empty'
-                    }
-                }
-            },
-            lastName: {
-                validators: {
-                    notEmpty: {
-                        message: 'The last name is required and cannot be empty'
-                    }
-                }
-            },
-            email: {
-                validators: {
-                    notEmpty: {
-                        message: 'The email address is required and cannot be empty'
-                    },
-                    emailAddress: {
-                        message: 'The input is not a valid email address'
-                    }
-                }
-            },
-            gender: {
-                validators: {
-                    notEmpty: {
-                        message: 'The gender is required'
-                    }
-                }
-            }
-        }
-    });
+        });
 });
+
+
 </script>
 </body>
 </html>

demo/submitHandler.html

@@ -57,8 +57,9 @@
 </div>
 
 <script type="text/javascript">
-    $(document).ready(function() {
-        $('#defaultForm').bootstrapValidator({
+$(document).ready(function() {
+    $('#defaultForm')
+        .bootstrapValidator({
             message: 'This value is not valid',
             //live: 'submitted',
             feedbackIcons: {
@@ -66,11 +67,6 @@
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
-            submitHandler: function(validator, form) {
-                // 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();
-            },
             fields: {
                 username: {
                     message: 'The username is not valid',
@@ -111,8 +107,16 @@
                     }
                 }
             }
+        })
+        .on('success.form.bv', function(e) {
+            // Prevent submit form
+            e.preventDefault();
+
+            var $form     = $(e.target),
+                validator = $form.data('bootstrapValidator');
+            $form.find('.alert').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('username').val()).show();
         });
-    });
+});
 </script>
 </body>
 </html>

dist/css/bootstrapValidator.min.css

@@ -2,7 +2,7 @@
  * BootstrapValidator (http://bootstrapvalidator.com)
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
  *
- * @version     v0.5.0-dev, built on 2014-07-12 10:38:50 AM
+ * @version     v0.5.0-dev, built on 2014-07-14 8:29:15 AM
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT

dist/js/bootstrapValidator.js

@@ -2,7 +2,7 @@
  * BootstrapValidator (http://bootstrapvalidator.com)
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
  *
- * @version     v0.5.0-dev, built on 2014-07-12 10:38:50 AM
+ * @version     v0.5.0-dev, built on 2014-07-14 8:29:15 AM
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT
@@ -562,13 +562,8 @@
                 return;
             }
 
-            // Call the custom submission if enabled
-            if (this.options.submitHandler && 'function' === typeof this.options.submitHandler) {
-                // If you want to submit the form inside your submit handler, please call defaultSubmit() method
-                this.options.submitHandler.call(this, this, this.$form);
-            } else {
-                this.disableSubmitButtons(true).defaultSubmit();
-            }
+            // Submit the form
+            this.disableSubmitButtons(true).defaultSubmit();
         },
 
         /**
@@ -1084,8 +1079,6 @@
         /**
          * Submit the form using default submission.
          * It also does not perform any validations when submitting the form
-         *
-         * It might be used when you want to submit the form right inside the submitHandler()
          */
         defaultSubmit: function() {
             if (this.$submitButton) {
@@ -1640,15 +1633,6 @@
         // These buttons will be disabled to prevent the valid form from multiple submissions
         submitButtons: '[type="submit"]',
 
-        // The custom submit handler
-        // It will prevent the form from the default submission
-        //
-        //  submitHandler: function(validator, form) {
-        //      - validator is the BootstrapValidator instance
-        //      - form is the jQuery object presenting the current form
-        //  }
-        submitHandler: null,
-
         // Live validating option
         // Can be one of 3 values:
         // - enabled: The plugin validates fields as soon as they are changed

src/js/bootstrapValidator.js

@@ -561,13 +561,8 @@
                 return;
             }
 
-            // Call the custom submission if enabled
-            if (this.options.submitHandler && 'function' === typeof this.options.submitHandler) {
-                // If you want to submit the form inside your submit handler, please call defaultSubmit() method
-                this.options.submitHandler.call(this, this, this.$form);
-            } else {
-                this.disableSubmitButtons(true).defaultSubmit();
-            }
+            // Submit the form
+            this.disableSubmitButtons(true).defaultSubmit();
         },
 
         /**
@@ -1083,8 +1078,6 @@
         /**
          * Submit the form using default submission.
          * It also does not perform any validations when submitting the form
-         *
-         * It might be used when you want to submit the form right inside the submitHandler()
          */
         defaultSubmit: function() {
             if (this.$submitButton) {
@@ -1639,15 +1632,6 @@
         // These buttons will be disabled to prevent the valid form from multiple submissions
         submitButtons: '[type="submit"]',
 
-        // The custom submit handler
-        // It will prevent the form from the default submission
-        //
-        //  submitHandler: function(validator, form) {
-        //      - validator is the BootstrapValidator instance
-        //      - form is the jQuery object presenting the current form
-        //  }
-        submitHandler: null,
-
         // Live validating option
         // Can be one of 3 values:
         // - enabled: The plugin validates fields as soon as they are changed

test/spec.js

@@ -1663,21 +1663,20 @@ function validateCaptcha(value, validator, $field) {
 
 describe('callback', function() {
     beforeEach(function() {
-        $(['<div class="container">',
-                '<form class="form-horizontal" id="callbackForm">',
-                    '<div class="form-group">',
-                        '<label class="col-md-3 control-label" id="captchaOperation"></label>',
-                        '<div class="col-md-2">',
-                            '<input type="text" class="form-control" name="captcha" />',
-                        '</div>',
+        $([
+            '<form class="form-horizontal" id="callbackForm">',
+                '<div class="form-group">',
+                    '<label class="col-md-3 control-label" id="captchaOperation"></label>',
+                    '<div class="col-md-2">',
+                        '<input type="text" class="form-control" name="captcha" />',
                     '</div>',
-                    '<div class="form-group">',
-                        '<div class="col-md-2 col-md-offset-3">',
-                            '<input type="text" class="form-control" name="declarativeCaptcha" data-bv-callback data-bv-callback-callback="validateCaptcha" />',
-                        '</div>',
+                '</div>',
+                '<div class="form-group">',
+                    '<div class="col-md-2 col-md-offset-3">',
+                        '<input type="text" class="form-control" name="declarativeCaptcha" data-bv-callback data-bv-callback-callback="validateCaptcha" />',
                     '</div>',
-                '</form>',
-            '</div>'
+                '</div>',
+            '</form>'
         ].join('\n')).appendTo('body');
 
         $('#callbackForm').bootstrapValidator({
@@ -1701,7 +1700,7 @@ describe('callback', function() {
     });
 
     afterEach(function() {
-        $('#callbackForm').bootstrapValidator('destroy').parent().remove();
+        $('#callbackForm').bootstrapValidator('destroy').remove();
     });
 
     it('execute the callback', function() {

test/spec/validator/callback.js

@@ -5,21 +5,20 @@ function validateCaptcha(value, validator, $field) {
 
 describe('callback', function() {
     beforeEach(function() {
-        $(['<div class="container">',
-                '<form class="form-horizontal" id="callbackForm">',
-                    '<div class="form-group">',
-                        '<label class="col-md-3 control-label" id="captchaOperation"></label>',
-                        '<div class="col-md-2">',
-                            '<input type="text" class="form-control" name="captcha" />',
-                        '</div>',
+        $([
+            '<form class="form-horizontal" id="callbackForm">',
+                '<div class="form-group">',
+                    '<label class="col-md-3 control-label" id="captchaOperation"></label>',
+                    '<div class="col-md-2">',
+                        '<input type="text" class="form-control" name="captcha" />',
                     '</div>',
-                    '<div class="form-group">',
-                        '<div class="col-md-2 col-md-offset-3">',
-                            '<input type="text" class="form-control" name="declarativeCaptcha" data-bv-callback data-bv-callback-callback="validateCaptcha" />',
-                        '</div>',
+                '</div>',
+                '<div class="form-group">',
+                    '<div class="col-md-2 col-md-offset-3">',
+                        '<input type="text" class="form-control" name="declarativeCaptcha" data-bv-callback data-bv-callback-callback="validateCaptcha" />',
                     '</div>',
-                '</form>',
-            '</div>'
+                '</div>',
+            '</form>'
         ].join('\n')).appendTo('body');
 
         $('#callbackForm').bootstrapValidator({
@@ -43,7 +42,7 @@ describe('callback', function() {
     });
 
     afterEach(function() {
-        $('#callbackForm').bootstrapValidator('destroy').parent().remove();
+        $('#callbackForm').bootstrapValidator('destroy').remove();
     });
 
     it('execute the callback', function() {