#195: Allow to set the success/error event on field by attribute, event, or callback

demo/event2.html

@@ -24,7 +24,7 @@
                         <div class="col-lg-6">
                             <div class="input-group">
                                 <span class="input-group-addon">Singapore</span>
-                                <input type="text" class="form-control" name="postalCode" id="postalCode" placeholder="Postal Code" />
+                                <input type="text" class="form-control" name="postalCode" placeholder="Postal Code" />
                             </div>
                         </div>
                         <div class="col-lg-1">
@@ -73,13 +73,13 @@ $(document).ready(function() {
         .on('error.field.bv', function(e, data) {
             if (data.field == 'postalCode') {
                 // The postal code is not valid
-                $('#lookupBtn').prop('disabled', true).removeClass('btn-success btn-warning').addClass('btn-warning')
+                $('#lookupBtn').prop('disabled', true).removeClass('btn-success btn-warning').addClass('btn-warning');
             }
         })
         .on('success.field.bv', function(e, data) {
             if (data.field == 'postalCode') {
                 // The postal code is valid
-                $('#lookupBtn').prop('disabled', false).removeClass('btn-success btn-warning').addClass('btn-success')
+                $('#lookupBtn').prop('disabled', false).removeClass('btn-success btn-warning').addClass('btn-success');
             }
         });
 });

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-26 9:18:04 AM
+ * @version     v0.5.0-dev, built on 2014-06-26 6:56:31 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-26 9:18:04 AM
+ * @version     v0.5.0-dev, built on 2014-06-26 6:56:31 PM
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT
@@ -162,6 +162,8 @@
                     group:         $field.attr('data-bv-group'),
                     selector:      $field.attr('data-bv-selector'),
                     threshold:     $field.attr('data-bv-threshold'),
+                    onSuccess:     $field.attr('data-bv-onsuccess'),
+                    onError:       $field.attr('data-bv-onerror'),
                     validators:    validators
                 },
                 emptyOptions    = $.isEmptyObject(opts),        // Check if the field options are set using HTML attributes
@@ -291,6 +293,18 @@
                 }
             }
 
+            // Prepare the events
+            if (this.options.fields[field].onSuccess) {
+                fields.on('success.field.bv', function(e, data) {
+                    $.fn.bootstrapValidator.helpers.call(that.options.fields[field].onSuccess, [e, data]);
+                });
+            }
+            if (this.options.fields[field].onError) {
+                fields.on('error.field.bv', function(e, data) {
+                    $.fn.bootstrapValidator.helpers.call(that.options.fields[field].onError, [e, data]);
+                });
+            }
+
             // Set live mode
             var trigger = this.options.fields[field].trigger || this.options.trigger || event,
                 events  = $.map(trigger.split(' '), function(item) {
@@ -580,6 +594,11 @@
                     field: field,
                     element: $field
                 });
+                $field.trigger($.Event('success.field.bv'), {
+                    field: field,
+                    element: $field,
+                    validator: this
+                });
             }
             // If all validators are completed and there is at least one validator which doesn't pass
             else if (counter[this.STATUS_NOT_VALIDATED] === 0 && counter[this.STATUS_VALIDATING] === 0 && counter[this.STATUS_INVALID] > 0) {
@@ -590,6 +609,11 @@
                     field: field,
                     element: $field
                 });
+                $field.trigger($.Event('error.field.bv'), {
+                    field: field,
+                    element: $field,
+                    validator: this
+                });
             }
         },
 
@@ -1434,6 +1458,36 @@
     // Helper methods, which can be used in validator class
     $.fn.bootstrapValidator.helpers = {
         /**
+         * Execute a callback function
+         *
+         * @param {String|Function} functionName Can be
+         * - name of global function
+         * - name of namespace function (such as A.B.C)
+         * - a function
+         * @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;
+            }
+        },
+
+        /**
          * Format a string
          * It's used to format the error message
          * format('The field must between %s and %s', [10, 20]) = 'The field must between 10 and 20'

src/js/bootstrapValidator.js

@@ -161,6 +161,8 @@
                     group:         $field.attr('data-bv-group'),
                     selector:      $field.attr('data-bv-selector'),
                     threshold:     $field.attr('data-bv-threshold'),
+                    onSuccess:     $field.attr('data-bv-onsuccess'),
+                    onError:       $field.attr('data-bv-onerror'),
                     validators:    validators
                 },
                 emptyOptions    = $.isEmptyObject(opts),        // Check if the field options are set using HTML attributes
@@ -290,6 +292,18 @@
                 }
             }
 
+            // Prepare the events
+            if (this.options.fields[field].onSuccess) {
+                fields.on('success.field.bv', function(e, data) {
+                    $.fn.bootstrapValidator.helpers.call(that.options.fields[field].onSuccess, [e, data]);
+                });
+            }
+            if (this.options.fields[field].onError) {
+                fields.on('error.field.bv', function(e, data) {
+                    $.fn.bootstrapValidator.helpers.call(that.options.fields[field].onError, [e, data]);
+                });
+            }
+
             // Set live mode
             var trigger = this.options.fields[field].trigger || this.options.trigger || event,
                 events  = $.map(trigger.split(' '), function(item) {
@@ -579,6 +593,11 @@
                     field: field,
                     element: $field
                 });
+                $field.trigger($.Event('success.field.bv'), {
+                    field: field,
+                    element: $field,
+                    validator: this
+                });
             }
             // If all validators are completed and there is at least one validator which doesn't pass
             else if (counter[this.STATUS_NOT_VALIDATED] === 0 && counter[this.STATUS_VALIDATING] === 0 && counter[this.STATUS_INVALID] > 0) {
@@ -589,6 +608,11 @@
                     field: field,
                     element: $field
                 });
+                $field.trigger($.Event('error.field.bv'), {
+                    field: field,
+                    element: $field,
+                    validator: this
+                });
             }
         },
 
@@ -1433,6 +1457,36 @@
     // Helper methods, which can be used in validator class
     $.fn.bootstrapValidator.helpers = {
         /**
+         * Execute a callback function
+         *
+         * @param {String|Function} functionName Can be
+         * - name of global function
+         * - name of namespace function (such as A.B.C)
+         * - a function
+         * @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;
+            }
+        },
+
+        /**
          * Format a string
          * It's used to format the error message
          * format('The field must between %s and %s', [10, 20]) = 'The field must between 10 and 20'

test/spec.js

@@ -1,3 +1,192 @@
+function onEmailValid(e, data) {
+    $('#msg').html(data.field + ' is valid');
+};
+
+function onEmailInvalid(e, data) {
+    $('#msg').html(data.field + ' is invalid');
+};
+
+describe('event field attribute callback global', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress data-bv-onsuccess="onEmailValid" data-bv-onerror="onEmailInvalid" />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form').bootstrapValidator();
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('call data-bv-onsuccess', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('email is valid');
+    });
+
+    it('call data-bv-onerror', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('email is invalid');
+    });
+});
+
+var My = {
+    NameSpace: {
+        onEmailValid: function(e, data) {
+            $('#msg').html('My.NameSpace.onEmailValid() called, ' + data.field + ' is valid');
+        },
+
+        onEmailInvalid: function(e, data) {
+            $('#msg').html('My.NameSpace.onEmailInvalid() called, ' + data.field + ' is invalid');
+        }
+    }
+};
+
+describe('event field attribute callback namespace', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress data-bv-onsuccess="My.NameSpace.onEmailValid" data-bv-onerror="My.NameSpace.onEmailInvalid" />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form').bootstrapValidator();
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('call data-bv-onsuccess', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('My.NameSpace.onEmailValid() called, email is valid');
+    });
+
+    it('call data-bv-onerror', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('My.NameSpace.onEmailInvalid() called, email is invalid');
+    });
+});
+
+describe('event field trigger', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form')
+            .bootstrapValidator()
+            .on('success.field.bv', '[name="email"]', function(e, data) {
+                $('#msg').html('triggered success.field.bv on ' + data.field);
+            })
+            .on('error.field.bv', '[name="email"]', function(e, data) {
+                $('#msg').html('triggered error.field.bv on ' + data.field);
+            });
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('trigger success.field.bv', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('triggered success.field.bv on email');
+    });
+
+    it('trigger error.field.bv', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('triggered error.field.bv on email');
+    });
+});
+
+describe('event field programmatically', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form').bootstrapValidator({
+            fields: {
+                email: {
+                    onSuccess: function(e, data) {
+                        $('#msg').html('onSuccess() called');
+                    },
+                    onError: function(e, data) {
+                        $('#msg').html('onError() called');
+                    },
+                    validator: {
+                        emailAddress: {}
+                    }
+                }
+            }
+        });
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('call onSuccess()', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('onSuccess() called');
+    });
+
+    it('call onError()', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('onError() called');
+    });
+});
+
 describe('creditCard', function() {
     // Get the fake credit card number at http://www.getcreditcardnumbers.com/
 

test/spec/event.js

@@ -0,0 +1,188 @@
+function onEmailValid(e, data) {
+    $('#msg').html(data.field + ' is valid');
+};
+
+function onEmailInvalid(e, data) {
+    $('#msg').html(data.field + ' is invalid');
+};
+
+describe('event field attribute callback global', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress data-bv-onsuccess="onEmailValid" data-bv-onerror="onEmailInvalid" />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form').bootstrapValidator();
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('call data-bv-onsuccess', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('email is valid');
+    });
+
+    it('call data-bv-onerror', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('email is invalid');
+    });
+});
+
+var My = {
+    NameSpace: {
+        onEmailValid: function(e, data) {
+            $('#msg').html('My.NameSpace.onEmailValid() called, ' + data.field + ' is valid');
+        },
+
+        onEmailInvalid: function(e, data) {
+            $('#msg').html('My.NameSpace.onEmailInvalid() called, ' + data.field + ' is invalid');
+        }
+    }
+};
+
+describe('event field attribute callback namespace', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress data-bv-onsuccess="My.NameSpace.onEmailValid" data-bv-onerror="My.NameSpace.onEmailInvalid" />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form').bootstrapValidator();
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('call data-bv-onsuccess', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('My.NameSpace.onEmailValid() called, email is valid');
+    });
+
+    it('call data-bv-onerror', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('My.NameSpace.onEmailInvalid() called, email is invalid');
+    });
+});
+
+describe('event field trigger', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form')
+            .bootstrapValidator()
+            .on('success.field.bv', '[name="email"]', function(e, data) {
+                $('#msg').html('triggered success.field.bv on ' + data.field);
+            })
+            .on('error.field.bv', '[name="email"]', function(e, data) {
+                $('#msg').html('triggered error.field.bv on ' + data.field);
+            });
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('trigger success.field.bv', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('triggered success.field.bv on email');
+    });
+
+    it('trigger error.field.bv', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('triggered error.field.bv on email');
+    });
+});
+
+describe('event field programmatically', function() {
+    beforeEach(function() {
+        var html = [
+            '<div class="container">',
+                '<form class="form-horizontal" id="form">',
+                    '<div id="msg"></div>',
+                    '<div class="form-group">',
+                        '<input type="text" name="email" data-bv-emailaddress />',
+                    '</div>',
+                '</form>',
+            '</div>'
+        ].join('\n');
+
+        $(html).appendTo('body');
+        $('#form').bootstrapValidator({
+            fields: {
+                email: {
+                    onSuccess: function(e, data) {
+                        $('#msg').html('onSuccess() called');
+                    },
+                    onError: function(e, data) {
+                        $('#msg').html('onError() called');
+                    },
+                    validator: {
+                        emailAddress: {}
+                    }
+                }
+            }
+        });
+
+        this._bs     = $('#form').data('bootstrapValidator');
+        this._$field = this._bs.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#form').bootstrapValidator('destroy').remove();
+    });
+
+    it('call onSuccess()', function() {
+        this._$field.val('email@domain.com');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('onSuccess() called');
+    });
+
+    it('call onError()', function() {
+        this._$field.val('email@domain');
+        this._bs.validate();
+        expect($('#msg').html()).toEqual('onError() called');
+    });
+});