#145: The row state is now only marked as success if all fields on it are valid

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## v0.4.1 (not released yet)
+
+__Improvements__:
+
+* [#145](https://github.com/nghuuphuoc/bootstrapvalidator/issues/145): The row state is now only marked as success if all fields on it are valid
+
 ## v0.4.0 (2014-04-03)
 
 __New features__:

bootstrapvalidator.jquery.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrapValidator",
-    "version": "0.4.0",
+    "version": "0.4.1-dev",
     "title": "BootstrapValidator",
     "author": {
         "name": "Nguyen Huu Phuoc",

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "bootstrapValidator",
     "description": "The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3",
-    "version": "0.4.0",
+    "version": "0.4.1-dev",
     "main": [
         "dist/css/bootstrapValidator.css",
         "dist/js/bootstrapValidator.js"

dist/js/bootstrapValidator.js

@@ -487,7 +487,7 @@
          * @param {String} field The field name
          * @param {String} status The status
          * Can be 'NOT_VALIDATED', 'VALIDATING', 'INVALID' or 'VALID'
-         * @param {String|null} validatorName The validator name. If null, the method updates validity result for all validators
+         * @param {String} [validatorName] The validator name. If null, the method updates validity result for all validators
          * @return {BootstrapValidator}
          */
         updateStatus: function(field, status, validatorName) {
@@ -508,16 +508,17 @@
          * @param {String} field The field name
          * @param {String} status The status
          * Can be 'NOT_VALIDATED', 'VALIDATING', 'INVALID' or 'VALID'
-         * @param {String|null} validatorName The validator name. If null, the method updates validity result for all validators
+         * @param {String} [validatorName] The validator name. If null, the method updates validity result for all validators
          * @return {BootstrapValidator}
          */
         updateElementStatus: function($field, status, validatorName) {
-            var that     = this,
-                field    = $field.attr('data-bv-field'),
-                $parent  = $field.parents('.form-group'),
-                $message = $field.data('bv.messages'),
-                $errors  = $message.find('.help-block[data-bv-validator]'),
-                $icon    = $parent.find('.form-control-feedback[data-bv-field="' + field + '"]');
+            var that       = this,
+                field      = $field.attr('data-bv-field'),
+                $parent    = $field.parents('.form-group'),
+                $message   = $field.data('bv.messages'),
+                $rowErrors = $parent.find('.help-block[data-bv-validator]'),
+                $errors    = $message.find('.help-block[data-bv-validator]'),
+                $icon      = $parent.find('.form-control-feedback[data-bv-field="' + field + '"]');
 
             // Update status
             if (validatorName) {
@@ -553,23 +554,24 @@
                     validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
                     // If the field is valid (passes all validators)
-                    if ($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)
-                    {
-                        this.disableSubmitButtons(false);
-                        $parent.removeClass('has-error').addClass('has-success');
-                        if ($icon) {
-                            $icon.removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
-                        }
-                    } else {
-                        this.disableSubmitButtons(true);
-                        $parent.removeClass('has-success').addClass('has-error');
-                        if ($icon) {
-                            $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
-                        }
+                    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);
+                    this.disableSubmitButtons(validField ? false : true);
+                    if ($icon) {
+                        $icon
+                            .removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid)
+                            .addClass(validField ? this.options.feedbackIcons.valid : this.options.feedbackIcons.invalid)
+                            .show();
                     }
+
+                    // Check if all fields in the same row are valid
+                    var validRow = ($rowErrors.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);
+                    $parent.removeClass('has-error has-success').addClass(validRow ? 'has-success' : 'has-error');
                     break;
 
                 case this.STATUS_NOT_VALIDATED:

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrapValidator",
-    "version": "0.4.0",
+    "version": "0.4.1-dev",
     "description": "The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3",
     "keywords": ["jQuery", "plugin", "validate", "validator", "form", "Bootstrap"],
     "author": {

src/js/bootstrapValidator.js

@@ -486,7 +486,7 @@
          * @param {String} field The field name
          * @param {String} status The status
          * Can be 'NOT_VALIDATED', 'VALIDATING', 'INVALID' or 'VALID'
-         * @param {String|null} validatorName The validator name. If null, the method updates validity result for all validators
+         * @param {String} [validatorName] The validator name. If null, the method updates validity result for all validators
          * @return {BootstrapValidator}
          */
         updateStatus: function(field, status, validatorName) {
@@ -507,16 +507,17 @@
          * @param {String} field The field name
          * @param {String} status The status
          * Can be 'NOT_VALIDATED', 'VALIDATING', 'INVALID' or 'VALID'
-         * @param {String|null} validatorName The validator name. If null, the method updates validity result for all validators
+         * @param {String} [validatorName] The validator name. If null, the method updates validity result for all validators
          * @return {BootstrapValidator}
          */
         updateElementStatus: function($field, status, validatorName) {
-            var that     = this,
-                field    = $field.attr('data-bv-field'),
-                $parent  = $field.parents('.form-group'),
-                $message = $field.data('bv.messages'),
-                $errors  = $message.find('.help-block[data-bv-validator]'),
-                $icon    = $parent.find('.form-control-feedback[data-bv-field="' + field + '"]');
+            var that       = this,
+                field      = $field.attr('data-bv-field'),
+                $parent    = $field.parents('.form-group'),
+                $message   = $field.data('bv.messages'),
+                $rowErrors = $parent.find('.help-block[data-bv-validator]'),
+                $errors    = $message.find('.help-block[data-bv-validator]'),
+                $icon      = $parent.find('.form-control-feedback[data-bv-field="' + field + '"]');
 
             // Update status
             if (validatorName) {
@@ -552,23 +553,24 @@
                     validatorName ? $errors.filter('[data-bv-validator="' + validatorName + '"]').hide() : $errors.hide();
 
                     // If the field is valid (passes all validators)
-                    if ($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)
-                    {
-                        this.disableSubmitButtons(false);
-                        $parent.removeClass('has-error').addClass('has-success');
-                        if ($icon) {
-                            $icon.removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
-                        }
-                    } else {
-                        this.disableSubmitButtons(true);
-                        $parent.removeClass('has-success').addClass('has-error');
-                        if ($icon) {
-                            $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
-                        }
+                    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);
+                    this.disableSubmitButtons(validField ? false : true);
+                    if ($icon) {
+                        $icon
+                            .removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid)
+                            .addClass(validField ? this.options.feedbackIcons.valid : this.options.feedbackIcons.invalid)
+                            .show();
                     }
+
+                    // Check if all fields in the same row are valid
+                    var validRow = ($rowErrors.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);
+                    $parent.removeClass('has-error has-success').addClass(validRow ? 'has-success' : 'has-error');
                     break;
 
                 case this.STATUS_NOT_VALIDATED: