Support data-bv-{validator}-on[error/success] attribute for field

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 9:36:29 AM
+ * @version     v0.5.0-dev, built on 2014-07-12 10:27:35 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 9:36:29 AM
+ * @version     v0.5.0-dev, built on 2014-07-12 10:27:35 AM
  * @author      https://twitter.com/nghuuphuoc
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
  * @license     MIT
@@ -103,6 +103,7 @@
             }
 
             this.$form.trigger($.Event('init.form.bv'), {
+                bv: this,
                 options: this.options
             });
 
@@ -145,7 +146,7 @@
                     || (html5AttrMap !== true && ('' === enabled || 'true' === enabled)))
                 {
                     // Try to parse the options via attributes
-                    validator.html5Attributes = validator.html5Attributes || { message: 'message' };
+                    validator.html5Attributes = $.extend({}, { message: 'message', onerror: 'onError', onsuccess: 'onSuccess' }, validator.html5Attributes);
                     validators[v] = $.extend({}, html5AttrMap === true ? {} : html5AttrMap, validators[v]);
 
                     for (html5AttrName in validator.html5Attributes) {
@@ -273,6 +274,18 @@
                             .html(this._getMessage(field, validatorName))
                             .appendTo($message);
                     }
+
+                    // Prepare the validator events
+                    if (this.options.fields[field].validators[validatorName].onSuccess) {
+                        $field.on('success.validator.bv', function(e, data) {
+                             $.fn.bootstrapValidator.helpers.call(that.options.fields[field].validators[validatorName].onSuccess, [e, data]);
+                        });
+                    }
+                    if (this.options.fields[field].validators[validatorName].onError) {
+                        $field.on('error.validator.bv', function(e, data) {
+                             $.fn.bootstrapValidator.helpers.call(that.options.fields[field].validators[validatorName].onError, [e, data]);
+                        });
+                    }
                 }
 
                 // Prepare the feedback icons
@@ -345,6 +358,7 @@
             }
 
             this.$form.trigger($.Event('init.field.bv'), {
+                bv: this,
                 field: field,
                 element: fields
             });
@@ -567,21 +581,24 @@
             var field         = $field.attr('data-bv-field'),
                 validators    = this.options.fields[field].validators,
                 counter       = {},
-                numValidators = 0;
-
-            // Trigger an event after given validator completes
-            if (validatorName) {
-                var data = {
+                numValidators = 0,
+                data          = {
+                    bv: this,
                     field: field,
                     element: $field,
                     validator: validatorName
                 };
+
+            // Trigger an event after given validator completes
+            if (validatorName) {
                 switch ($field.data('bv.result.' + validatorName)) {
                     case this.STATUS_INVALID:
                         this.$form.trigger($.Event('error.validator.bv'), data);
+                        $field.trigger($.Event('error.validator.bv'), data);
                         break;
                     case this.STATUS_VALID:
                         this.$form.trigger($.Event('success.validator.bv'), data);
+                        $field.trigger($.Event('success.validator.bv'), data);
                         break;
                     default:
                         break;
@@ -609,30 +626,16 @@
                 // Remove from the list of invalid fields
                 this.$invalidFields = this.$invalidFields.not($field);
 
-                this.$form.trigger($.Event('success.field.bv'), {
-                    field: field,
-                    element: $field
-                });
-                $field.trigger($.Event('success.field.bv'), {
-                    field: field,
-                    element: $field,
-                    validator: this
-                });
+                this.$form.trigger($.Event('success.field.bv'), data);
+                $field.trigger($.Event('success.field.bv'), data);
             }
             // 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) {
                 // Add to the list of invalid fields
                 this.$invalidFields = this.$invalidFields.add($field);
 
-                this.$form.trigger($.Event('error.field.bv'), {
-                    field: field,
-                    element: $field
-                });
-                $field.trigger($.Event('error.field.bv'), {
-                    field: field,
-                    element: $field,
-                    validator: this
-                });
+                this.$form.trigger($.Event('error.field.bv'), data);
+                $field.trigger($.Event('error.field.bv'), data);
             }
         },
 

src/js/bootstrapValidator.js

@@ -102,6 +102,7 @@
             }
 
             this.$form.trigger($.Event('init.form.bv'), {
+                bv: this,
                 options: this.options
             });
 
@@ -144,7 +145,7 @@
                     || (html5AttrMap !== true && ('' === enabled || 'true' === enabled)))
                 {
                     // Try to parse the options via attributes
-                    validator.html5Attributes = validator.html5Attributes || { message: 'message' };
+                    validator.html5Attributes = $.extend({}, { message: 'message', onerror: 'onError', onsuccess: 'onSuccess' }, validator.html5Attributes);
                     validators[v] = $.extend({}, html5AttrMap === true ? {} : html5AttrMap, validators[v]);
 
                     for (html5AttrName in validator.html5Attributes) {
@@ -272,6 +273,18 @@
                             .html(this._getMessage(field, validatorName))
                             .appendTo($message);
                     }
+
+                    // Prepare the validator events
+                    if (this.options.fields[field].validators[validatorName].onSuccess) {
+                        $field.on('success.validator.bv', function(e, data) {
+                             $.fn.bootstrapValidator.helpers.call(that.options.fields[field].validators[validatorName].onSuccess, [e, data]);
+                        });
+                    }
+                    if (this.options.fields[field].validators[validatorName].onError) {
+                        $field.on('error.validator.bv', function(e, data) {
+                             $.fn.bootstrapValidator.helpers.call(that.options.fields[field].validators[validatorName].onError, [e, data]);
+                        });
+                    }
                 }
 
                 // Prepare the feedback icons
@@ -344,6 +357,7 @@
             }
 
             this.$form.trigger($.Event('init.field.bv'), {
+                bv: this,
                 field: field,
                 element: fields
             });
@@ -566,21 +580,24 @@
             var field         = $field.attr('data-bv-field'),
                 validators    = this.options.fields[field].validators,
                 counter       = {},
-                numValidators = 0;
-
-            // Trigger an event after given validator completes
-            if (validatorName) {
-                var data = {
+                numValidators = 0,
+                data          = {
+                    bv: this,
                     field: field,
                     element: $field,
                     validator: validatorName
                 };
+
+            // Trigger an event after given validator completes
+            if (validatorName) {
                 switch ($field.data('bv.result.' + validatorName)) {
                     case this.STATUS_INVALID:
                         this.$form.trigger($.Event('error.validator.bv'), data);
+                        $field.trigger($.Event('error.validator.bv'), data);
                         break;
                     case this.STATUS_VALID:
                         this.$form.trigger($.Event('success.validator.bv'), data);
+                        $field.trigger($.Event('success.validator.bv'), data);
                         break;
                     default:
                         break;
@@ -608,30 +625,16 @@
                 // Remove from the list of invalid fields
                 this.$invalidFields = this.$invalidFields.not($field);
 
-                this.$form.trigger($.Event('success.field.bv'), {
-                    field: field,
-                    element: $field
-                });
-                $field.trigger($.Event('success.field.bv'), {
-                    field: field,
-                    element: $field,
-                    validator: this
-                });
+                this.$form.trigger($.Event('success.field.bv'), data);
+                $field.trigger($.Event('success.field.bv'), data);
             }
             // 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) {
                 // Add to the list of invalid fields
                 this.$invalidFields = this.$invalidFields.add($field);
 
-                this.$form.trigger($.Event('error.field.bv'), {
-                    field: field,
-                    element: $field
-                });
-                $field.trigger($.Event('error.field.bv'), {
-                    field: field,
-                    element: $field,
-                    validator: this
-                });
+                this.$form.trigger($.Event('error.field.bv'), data);
+                $field.trigger($.Event('error.field.bv'), data);
             }
         },
 

test/spec.js

@@ -708,9 +708,6 @@ describe('event field programmatically', function() {
                     },
                     onError: function(e, data) {
                         $('#msg').html('onError() called');
-                    },
-                    validator: {
-                        emailAddress: {}
                     }
                 }
             }
@@ -737,6 +734,101 @@ describe('event field programmatically', function() {
     });
 });
 
+// ---
+// Validator events
+// ---
+function onEmailAddressValidatorSuccess(e, data) {
+    $('#msg').html(data.validator + ' validator passed');
+};
+
+function onEmailAddressValidatorError(e, data) {
+    $('#msg').html(data.validator + ' validator did not pass');
+};
+
+describe('event validator declarative', function() {
+    beforeEach(function() {
+        $([
+            '<form class="form-horizontal" id="eventForm">',
+                '<div id="msg"></div>',
+                '<div class="form-group">',
+                    '<input type="text" name="email" data-bv-emailaddress data-bv-emailaddress-onsuccess="onEmailAddressValidatorSuccess" data-bv-emailaddress-onerror="onEmailAddressValidatorError" />',
+                '</div>',
+            '</form>'
+        ].join('\n')).appendTo('body');
+
+        $('#eventForm').bootstrapValidator();
+
+        this.bv     = $('#eventForm').data('bootstrapValidator');
+        this.$email = this.bv.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#eventForm').bootstrapValidator('destroy').remove();
+    });
+
+    it('trigger data-bv-emailaddress-onsuccess', function() {
+        this.$email.val('email@domain.com');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator passed');
+    });
+
+    it('trigger data-bv-emailaddress-onerror', function() {
+        this.$email.val('email@domain');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator did not pass');
+    });
+});
+
+describe('event validator programmatically', function() {
+    beforeEach(function() {
+        $([
+            '<form class="form-horizontal" id="eventForm">',
+                '<div id="msg"></div>',
+                '<div class="form-group">',
+                    '<input type="text" name="email" data-bv-emailaddress />',
+                '</div>',
+            '</form>'
+        ].join('\n')).appendTo('body');
+
+        $('#eventForm').bootstrapValidator({
+            fields: {
+                email: {
+                    validators: {
+                        emailAddress: {
+                            onSuccess: function(e, data) {
+                                $('#msg').html('emailAddress validator: onSuccess() called');
+                            },
+                            onError: function(e, data) {
+                                $('#msg').html('emailAddress validator: onError() called');
+                            },
+                            message: 'The email address is not valid'
+                        }
+                    }
+                }
+            }
+        });
+
+        this.bv     = $('#eventForm').data('bootstrapValidator');
+        this.$email = this.bv.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#eventForm').bootstrapValidator('destroy').remove();
+    });
+
+    it('call onSuccess()', function() {
+        this.$email.val('email@domain.com');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator: onSuccess() called');
+    });
+
+    it('call onError()', function() {
+        this.$email.val('email@domain');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator: onError() called');
+    });
+});
+
 describe('excluded', function() {
     beforeEach(function() {
         $([

test/spec/event.js

@@ -334,9 +334,6 @@ describe('event field programmatically', function() {
                     },
                     onError: function(e, data) {
                         $('#msg').html('onError() called');
-                    },
-                    validator: {
-                        emailAddress: {}
                     }
                 }
             }
@@ -362,3 +359,98 @@ describe('event field programmatically', function() {
         expect($('#msg').html()).toEqual('onError() called');
     });
 });
+
+// ---
+// Validator events
+// ---
+function onEmailAddressValidatorSuccess(e, data) {
+    $('#msg').html(data.validator + ' validator passed');
+};
+
+function onEmailAddressValidatorError(e, data) {
+    $('#msg').html(data.validator + ' validator did not pass');
+};
+
+describe('event validator declarative', function() {
+    beforeEach(function() {
+        $([
+            '<form class="form-horizontal" id="eventForm">',
+                '<div id="msg"></div>',
+                '<div class="form-group">',
+                    '<input type="text" name="email" data-bv-emailaddress data-bv-emailaddress-onsuccess="onEmailAddressValidatorSuccess" data-bv-emailaddress-onerror="onEmailAddressValidatorError" />',
+                '</div>',
+            '</form>'
+        ].join('\n')).appendTo('body');
+
+        $('#eventForm').bootstrapValidator();
+
+        this.bv     = $('#eventForm').data('bootstrapValidator');
+        this.$email = this.bv.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#eventForm').bootstrapValidator('destroy').remove();
+    });
+
+    it('trigger data-bv-emailaddress-onsuccess', function() {
+        this.$email.val('email@domain.com');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator passed');
+    });
+
+    it('trigger data-bv-emailaddress-onerror', function() {
+        this.$email.val('email@domain');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator did not pass');
+    });
+});
+
+describe('event validator programmatically', function() {
+    beforeEach(function() {
+        $([
+            '<form class="form-horizontal" id="eventForm">',
+                '<div id="msg"></div>',
+                '<div class="form-group">',
+                    '<input type="text" name="email" data-bv-emailaddress />',
+                '</div>',
+            '</form>'
+        ].join('\n')).appendTo('body');
+
+        $('#eventForm').bootstrapValidator({
+            fields: {
+                email: {
+                    validators: {
+                        emailAddress: {
+                            onSuccess: function(e, data) {
+                                $('#msg').html('emailAddress validator: onSuccess() called');
+                            },
+                            onError: function(e, data) {
+                                $('#msg').html('emailAddress validator: onError() called');
+                            },
+                            message: 'The email address is not valid'
+                        }
+                    }
+                }
+            }
+        });
+
+        this.bv     = $('#eventForm').data('bootstrapValidator');
+        this.$email = this.bv.getFieldElements('email');
+    });
+
+    afterEach(function() {
+        $('#eventForm').bootstrapValidator('destroy').remove();
+    });
+
+    it('call onSuccess()', function() {
+        this.$email.val('email@domain.com');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator: onSuccess() called');
+    });
+
+    it('call onError()', function() {
+        this.$email.val('email@domain');
+        this.bv.validate();
+        expect($('#msg').html()).toEqual('emailAddress validator: onError() called');
+    });
+});