#195: Add events for field validation

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## v0.5.0 (not released yet)
 
 * [#121](https://github.com/nghuuphuoc/bootstrapvalidator/issues/121): Add events for form validate successfully or not
+* [#195](https://github.com/nghuuphuoc/bootstrapvalidator/issues/195): Add events for field validation
 
 ## v0.4.5 (not released yet)
 

demo/dynamic.html

@@ -116,37 +116,44 @@
             });
         });
 
-        $('#defaultForm').bootstrapValidator({
-            message: 'This value is not valid',
-            feedbackIcons: {
-                valid: 'glyphicon glyphicon-ok',
-                invalid: 'glyphicon glyphicon-remove',
-                validating: 'glyphicon glyphicon-refresh'
-            },
-            fields: {
-                'textbox[]': {
-                    validators: {
-                        notEmpty: {
-                            message: 'The textbox field is required'
-                        }
-                    }
+        $('#defaultForm')
+            .bootstrapValidator({
+                message: 'This value is not valid',
+                feedbackIcons: {
+                    valid: 'glyphicon glyphicon-ok',
+                    invalid: 'glyphicon glyphicon-remove',
+                    validating: 'glyphicon glyphicon-refresh'
                 },
-                'checkbox[]': {
-                    validators: {
-                        notEmpty: {
-                            message: 'The checkbox field is required'
+                fields: {
+                    'textbox[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The textbox field is required'
+                            }
                         }
-                    }
-                },
-                'radio[]': {
-                    validators: {
-                        notEmpty: {
-                            message: 'The radio field is required'
+                    },
+                    'checkbox[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The checkbox field is required'
+                            }
+                        }
+                    },
+                    'radio[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The radio field is required'
+                            }
                         }
                     }
                 }
-            }
-        });
+            })
+            .on('error.field.bv', function(e, field, $field) {
+                console.log(field, $field, '-->error');
+            })
+            .on('success.field.bv', function(e, field, $field) {
+                console.log(field, $field, '-->success');
+            });
     });
 </script>
 </body>

demo/event.html

@@ -30,7 +30,6 @@
                             </div>
                         </div>
 
-                        <!--
                         <div class="form-group">
                             <label class="col-lg-3 control-label">Username</label>
                             <div class="col-lg-5">
@@ -45,6 +44,7 @@
                             </div>
                         </div>
 
+                        <!--
                         <div class="form-group">
                             <label class="col-lg-3 control-label">Password</label>
                             <div class="col-lg-5">
@@ -186,6 +186,10 @@ $(document).ready(function() {
                     validators: {
                         notEmpty: {
                             message: 'The first name is required and cannot be empty'
+                        },
+                        stringCase: {
+                            message: 'The first name must contain upper case characters only',
+                            case: 'upper'
                         }
                     }
                 },
@@ -284,14 +288,20 @@ $(document).ready(function() {
             }
         })
         .on('error.form.bv', function(e) {
-            console.log('error');
+            //console.log('error');
             // If you want to prevent the default handler (bootstrapValidator._onError)
             // e.preventDefault();
         })
         .on('success.form.bv', function(e) {
-            console.log('success');
+            //console.log('success');
             // If you want to prevent the default handler (bootstrapValidator._onSuccess)
             // e.preventDefault();
+        })
+        .on('error.field.bv', function(e, field) {
+            console.log(field, '-->error');
+        })
+        .on('success.field.bv', function(e, field) {
+            console.log(field, '-->success');
         });
 
     // Validate the form manually

dist/js/bootstrapValidator.js

@@ -270,6 +270,11 @@
             }
         },
 
+        /**
+         * Init field element
+         *
+         * @param {jQuery} $field The field element
+         */
         _initFieldElement: function($field) {
             var that      = this,
                 field     = $field.attr('name') || $field.attr('data-bv-field'),
@@ -486,6 +491,39 @@
             }
         },
 
+        /**
+         * Called after validating a field element
+         *
+         * @param {jQuery} $field The field element
+         */
+        _onValidateFieldCompleted: function($field) {
+            var field         = $field.attr('data-bv-field'),
+                validators    = this.options.fields[field].validators,
+                counter       = {},
+                numValidators = 0;
+
+            counter[this.STATUS_NOT_VALIDATED] = 0;
+            counter[this.STATUS_VALIDATING]    = 0;
+            counter[this.STATUS_INVALID]       = 0;
+            counter[this.STATUS_VALID]         = 0;
+
+            for (var validatorName in validators) {
+                numValidators++;
+                var result = $field.data('bv.result.' + validatorName);
+                if (result) {
+                    counter[result]++;
+                }
+            }
+
+            if (counter[this.STATUS_VALID] == numValidators) {
+                this.$form.trigger($.Event('success.field.bv'), [field, $field]);
+            }
+            // 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) {
+                this.$form.trigger($.Event('error.field.bv'), [field, $field]);
+            }
+        },
+
         // --- Public methods ---
 
         /**
@@ -587,6 +625,7 @@
                 // Don't validate field if it is already done
                 var result = $field.data('bv.result.' + validatorName);
                 if (result == this.STATUS_VALID || result == this.STATUS_INVALID) {
+                    this._onValidateFieldCompleted($field);
                     continue;
                 }
 
@@ -672,6 +711,7 @@
             }
 
             // Show/hide error elements and feedback icons
+            validatorName ? $errors.filter('.help-block[data-bv-validator="' + validatorName + '"]').attr('data-bv-result', status) : $errors.attr('data-bv-result', status);
             switch (status) {
                 case this.STATUS_VALIDATING:
                     this.disableSubmitButtons(true);
@@ -702,10 +742,10 @@
                     validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
                     // If the field is valid (passes all validators)
-                    var validField = ($errors.filter(function() {
-                                        var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
-                                        return ('block' == display) || ($field.data('bv.result.' + v) != that.STATUS_VALID);
-                                    }).length == 0);
+                    var validField = $errors.filter(function() {
+                                        var v = $(this).attr('data-bv-validator');
+                                        return $field.data('bv.result.' + v) != that.STATUS_VALID;
+                                    }).length == 0;
                     this.disableSubmitButtons(validField ? false : true);
                     if ($icon) {
                         $icon
@@ -744,6 +784,8 @@
                     break;
             }
 
+            this._onValidateFieldCompleted($field);
+
             return this;
         },
 

src/js/bootstrapValidator.js

@@ -269,6 +269,11 @@
             }
         },
 
+        /**
+         * Init field element
+         *
+         * @param {jQuery} $field The field element
+         */
         _initFieldElement: function($field) {
             var that      = this,
                 field     = $field.attr('name') || $field.attr('data-bv-field'),
@@ -485,6 +490,39 @@
             }
         },
 
+        /**
+         * Called after validating a field element
+         *
+         * @param {jQuery} $field The field element
+         */
+        _onValidateFieldCompleted: function($field) {
+            var field         = $field.attr('data-bv-field'),
+                validators    = this.options.fields[field].validators,
+                counter       = {},
+                numValidators = 0;
+
+            counter[this.STATUS_NOT_VALIDATED] = 0;
+            counter[this.STATUS_VALIDATING]    = 0;
+            counter[this.STATUS_INVALID]       = 0;
+            counter[this.STATUS_VALID]         = 0;
+
+            for (var validatorName in validators) {
+                numValidators++;
+                var result = $field.data('bv.result.' + validatorName);
+                if (result) {
+                    counter[result]++;
+                }
+            }
+
+            if (counter[this.STATUS_VALID] == numValidators) {
+                this.$form.trigger($.Event('success.field.bv'), [field, $field]);
+            }
+            // 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) {
+                this.$form.trigger($.Event('error.field.bv'), [field, $field]);
+            }
+        },
+
         // --- Public methods ---
 
         /**
@@ -586,6 +624,7 @@
                 // Don't validate field if it is already done
                 var result = $field.data('bv.result.' + validatorName);
                 if (result == this.STATUS_VALID || result == this.STATUS_INVALID) {
+                    this._onValidateFieldCompleted($field);
                     continue;
                 }
 
@@ -671,6 +710,7 @@
             }
 
             // Show/hide error elements and feedback icons
+            validatorName ? $errors.filter('.help-block[data-bv-validator="' + validatorName + '"]').attr('data-bv-result', status) : $errors.attr('data-bv-result', status);
             switch (status) {
                 case this.STATUS_VALIDATING:
                     this.disableSubmitButtons(true);
@@ -701,10 +741,10 @@
                     validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
                     // If the field is valid (passes all validators)
-                    var validField = ($errors.filter(function() {
-                                        var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
-                                        return ('block' == display) || ($field.data('bv.result.' + v) != that.STATUS_VALID);
-                                    }).length == 0);
+                    var validField = $errors.filter(function() {
+                                        var v = $(this).attr('data-bv-validator');
+                                        return $field.data('bv.result.' + v) != that.STATUS_VALID;
+                                    }).length == 0;
                     this.disableSubmitButtons(validField ? false : true);
                     if ($icon) {
                         $icon
@@ -743,6 +783,8 @@
                     break;
             }
 
+            this._onValidateFieldCompleted($field);
+
             return this;
         },