#432: Define the callback via ```data-bv-callback-callback``` attribute

CHANGELOG.md

@@ -47,6 +47,7 @@ __Improvements__
 * [#393](https://github.com/nghuuphuoc/bootstrapvalidator/pull/393): The [remote validator](http://bootstrapvalidator.com/validators/remote/) adds support for dynamic ```url``` and method type (GET/POST), thanks to [@ericnakagawa](https://github.com/ericnakagawa)
 * [#422](https://github.com/nghuuphuoc/bootstrapvalidator/issues/422): Exclude particular field by ```excluded``` option or ```data-bv-excluded``` attribute
 * [#431](https://github.com/nghuuphuoc/bootstrapvalidator/issues/431): Add built time to the build file
+* [#432](https://github.com/nghuuphuoc/bootstrapvalidator/issues/432): Define the callback via ```data-bv-callback-callback``` attribute
 
 __Bug Fixes__
 * [#288](https://github.com/nghuuphuoc/bootstrapvalidator/issues/288): Fix [date validator](http://bootstrapvalidator.com/validators/date/) issue on IE8

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-06-27 9:50:43 AM
+ * @version     v0.5.0-dev, built on 2014-06-27 2:05:03 PM
  * @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-06-27 9:50:43 AM
+ * @version     v0.5.0-dev, built on 2014-06-27 2:05:03 PM
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT
@@ -1500,23 +1500,16 @@
          * @param {Array} args The callback arguments
          */
         call: function(functionName, args) {
-            switch (typeof functionName) {
-                case 'function':
-                    functionName.apply(this, args);
-                    break;
-
-                case 'string':
-                    var ns      = functionName.split('.'),
-                        func    = ns.pop(),
-                        context = window;
-                    for (var i = 0; i < ns.length; i++) {
-                        context = context[ns[i]];
-                    }
-                    context[func].apply(this, args);
-                    break;
-
-                default:
-                    break;
+            if ('function' === typeof functionName) {
+                return functionName.apply(this, args);
+            } else if ('string' === typeof functionName) {
+                var ns      = functionName.split('.'),
+                    func    = ns.pop(),
+                    context = window;
+                for (var i = 0; i < ns.length; i++) {
+                    context = context[ns[i]];
+                }
+                return context[func].apply(this, args);
             }
         },
 
@@ -1728,6 +1721,11 @@
     });
 
     $.fn.bootstrapValidator.validators.callback = {
+        html5Attributes: {
+            message: 'message',
+            callback: 'callback'
+        },
+
         /**
          * Return result from the callback method
          *
@@ -1745,12 +1743,14 @@
          */
         validate: function(validator, $field, options) {
             var value = $field.val();
-            if (options.callback && 'function' === typeof options.callback) {
+
+            if (options.callback) {
                 var dfd      = new $.Deferred(),
-                    response = options.callback.call(this, value, validator, $field);
+                    response = $.fn.bootstrapValidator.helpers.call(options.callback, [value, validator, $field]);
                 dfd.resolve($field, 'callback', 'boolean' === typeof response ? response : response.valid, 'object' === typeof response && response.message ? response.message : null);
                 return dfd;
             }
+
             return true;
         }
     };

src/js/bootstrapValidator.js

@@ -1499,23 +1499,16 @@
          * @param {Array} args The callback arguments
          */
         call: function(functionName, args) {
-            switch (typeof functionName) {
-                case 'function':
-                    functionName.apply(this, args);
-                    break;
-
-                case 'string':
-                    var ns      = functionName.split('.'),
-                        func    = ns.pop(),
-                        context = window;
-                    for (var i = 0; i < ns.length; i++) {
-                        context = context[ns[i]];
-                    }
-                    context[func].apply(this, args);
-                    break;
-
-                default:
-                    break;
+            if ('function' === typeof functionName) {
+                return functionName.apply(this, args);
+            } else if ('string' === typeof functionName) {
+                var ns      = functionName.split('.'),
+                    func    = ns.pop(),
+                    context = window;
+                for (var i = 0; i < ns.length; i++) {
+                    context = context[ns[i]];
+                }
+                return context[func].apply(this, args);
             }
         },
 

src/js/validator/callback.js

@@ -4,6 +4,11 @@
     });
 
     $.fn.bootstrapValidator.validators.callback = {
+        html5Attributes: {
+            message: 'message',
+            callback: 'callback'
+        },
+
         /**
          * Return result from the callback method
          *
@@ -21,12 +26,14 @@
          */
         validate: function(validator, $field, options) {
             var value = $field.val();
-            if (options.callback && 'function' === typeof options.callback) {
+
+            if (options.callback) {
                 var dfd      = new $.Deferred(),
-                    response = options.callback.call(this, value, validator, $field);
+                    response = $.fn.bootstrapValidator.helpers.call(options.callback, [value, validator, $field]);
                 dfd.resolve($field, 'callback', 'boolean' === typeof response ? response : response.valid, 'object' === typeof response && response.message ? response.message : null);
                 return dfd;
             }
+
             return true;
         }
     };

test/spec.js

@@ -341,6 +341,81 @@ describe('message', function() {
     });
 });
 
+function validateCaptcha(value, validator, $field) {
+    var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
+    return value === sum + '';
+};
+
+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>',
+                    '</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>',
+                '</form>',
+            '</div>'
+        ].join('\n')).appendTo('body');
+
+        $('#callbackForm').bootstrapValidator({
+            fields: {
+                captcha: {
+                    validators: {
+                        callback: {
+                            message: 'Wrong answer',
+                            callback: function(value, validator, $field) {
+                                return validateCaptcha(value, validator, $field);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        this.bv                  = $('#callbackForm').data('bootstrapValidator');
+        this.$captcha            = this.bv.getFieldElements('captcha');
+        this.$declarativeCaptcha = this.bv.getFieldElements('declarativeCaptcha');
+    });
+
+    afterEach(function() {
+        $('#callbackForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+    it('execute the callback', function() {
+        $('#captchaOperation').html('1 + 2');
+
+        this.$captcha.val('3');
+        this.bv.validate();
+        expect(this.bv.isValidField('captcha')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$captcha.val('5');
+        this.bv.validate();
+        expect(this.bv.isValidField('captcha')).toEqual(false);
+    });
+
+    it('callback declarative', function() {
+        $('#captchaOperation').html('10 + 20');
+
+        this.$declarativeCaptcha.val('40');
+        this.bv.validate();
+        expect(this.bv.isValidField('declarativeCaptcha')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$declarativeCaptcha.val('30');
+        this.bv.validate();
+        expect(this.bv.isValidField('declarativeCaptcha')).toBeTruthy();
+    });
+});
+
 describe('creditCard', function() {
     // Get the fake credit card number at http://www.getcreditcardnumbers.com/
 

test/spec/validator/callback.js

@@ -0,0 +1,74 @@
+function validateCaptcha(value, validator, $field) {
+    var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
+    return value === sum + '';
+};
+
+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>',
+                    '</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>',
+                '</form>',
+            '</div>'
+        ].join('\n')).appendTo('body');
+
+        $('#callbackForm').bootstrapValidator({
+            fields: {
+                captcha: {
+                    validators: {
+                        callback: {
+                            message: 'Wrong answer',
+                            callback: function(value, validator, $field) {
+                                return validateCaptcha(value, validator, $field);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        this.bv                  = $('#callbackForm').data('bootstrapValidator');
+        this.$captcha            = this.bv.getFieldElements('captcha');
+        this.$declarativeCaptcha = this.bv.getFieldElements('declarativeCaptcha');
+    });
+
+    afterEach(function() {
+        $('#callbackForm').bootstrapValidator('destroy').parent().remove();
+    });
+
+    it('execute the callback', function() {
+        $('#captchaOperation').html('1 + 2');
+
+        this.$captcha.val('3');
+        this.bv.validate();
+        expect(this.bv.isValidField('captcha')).toBeTruthy();
+
+        this.bv.resetForm();
+        this.$captcha.val('5');
+        this.bv.validate();
+        expect(this.bv.isValidField('captcha')).toEqual(false);
+    });
+
+    it('callback declarative', function() {
+        $('#captchaOperation').html('10 + 20');
+
+        this.$declarativeCaptcha.val('40');
+        this.bv.validate();
+        expect(this.bv.isValidField('declarativeCaptcha')).toEqual(false);
+
+        this.bv.resetForm();
+        this.$declarativeCaptcha.val('30');
+        this.bv.validate();
+        expect(this.bv.isValidField('declarativeCaptcha')).toBeTruthy();
+    });
+});