#262: The plugin now doesn't show the errors, feedback icons of given field if there are uncompleted validators

CHANGELOG.md

@@ -27,6 +27,7 @@ You can use new ```getSubmitButton()``` method to get the clicked submit button
 
 __Improvements__
 * [#244](https://github.com/nghuuphuoc/bootstrapvalidator/pull/244): Only enable the submit buttons if all fields are valid, thanks to [@smeagol74](https://github.com/smeagol74)
+* [#262](https://github.com/nghuuphuoc/bootstrapvalidator/issues/262): Improve the [```updateStatus()``` method](http://bootstrapvalidator.com/api/#update-status). The plugin now doesn't show the errors, feedback icons of given field if there are uncompleted validators
 * [#274](https://github.com/nghuuphuoc/bootstrapvalidator/pull/274): Fix feedback icons in ```input-group```, thanks to [@tiagofontella](https://github.com/tiagofontella)
 * [#287](https://github.com/nghuuphuoc/bootstrapvalidator/issues/287): Only send the submit button which is clicked. It's an enhancement for [#238](https://github.com/nghuuphuoc/bootstrapvalidator/issues/238)
 * [#297](https://github.com/nghuuphuoc/bootstrapvalidator/issues/297): Disable feedback icons for particular fields

demo/selector.html

@@ -107,8 +107,22 @@ $(document).ready(function() {
                         message: 'Expired',
                         callback: function(value, validator) {
                             value = parseInt(value, 10);
-                            var currentMonth = new Date().getMonth() + 1;
-                            return (value <= 12 && value >= currentMonth);
+                            var year         = validator.getFieldElements('expYear').val(),
+                                currentMonth = new Date().getMonth() + 1,
+                                currentYear  = new Date().getFullYear();
+                            if (value < 0 || value > 12) {
+                                return false;
+                            }
+                            if (year == '') {
+                                return true;
+                            }
+                            year = parseInt(year, 10);
+                            if (year > currentYear || (year == currentYear && value > currentMonth)) {
+                                validator.updateStatus('expYear', 'VALID');
+                                return true;
+                            } else {
+                                return false;
+                            }
                         }
                     }
                 }
@@ -126,8 +140,22 @@ $(document).ready(function() {
                         message: 'Expired',
                         callback: function(value, validator) {
                             value = parseInt(value, 10);
-                            var currentYear = new Date().getFullYear();
-                            return (value >= currentYear && value <= currentYear + 100);
+                            var month        = validator.getFieldElements('expMonth').val(),
+                                currentMonth = new Date().getMonth() + 1,
+                                currentYear  = new Date().getFullYear();
+                            if (value < currentYear || value > currentYear + 10) {
+                                return false;
+                            }
+                            if (month == '') {
+                                return false;
+                            }
+                            month = parseInt(month, 10);
+                            if (value > currentYear || (value == currentYear && month > currentMonth)) {
+                                validator.updateStatus('expMonth', 'VALID');
+                                return true;
+                            } else {
+                                return false;
+                            }
                         }
                     }
                 }

demo/selector2.html

@@ -24,17 +24,17 @@
                         <div class="form-group">
                             <label class="col-lg-3 control-label">Percentage</label>
                             <div class="col-lg-5">
-                                <input class="form-control percent" type="text" />
+                                <input class="form-control percent" name="first" type="text" value="0" />
                             </div>
                         </div>
                         <div class="form-group">
                             <div class="col-lg-offset-3 col-lg-5">
-                                <input class="form-control percent" type="text" />
+                                <input class="form-control percent" name="second" type="text" value="0" />
                             </div>
                         </div>
                         <div class="form-group">
                             <div class="col-lg-offset-3 col-lg-5">
-                                <input class="form-control percent" type="text" />
+                                <input class="form-control percent" name="third" type="text" value="0" />
                             </div>
                         </div>
                         <div class="form-group">
@@ -50,40 +50,42 @@
 
 <script type="text/javascript">
 $(document).ready(function() {
-    $('#sumForm').bootstrapValidator({
-        feedbackIcons: {
-            valid: 'glyphicon glyphicon-ok',
-            invalid: 'glyphicon glyphicon-remove',
-            validating: 'glyphicon glyphicon-refresh'
-        },
-        fields: {
-            'percentage': {
-                selector: '.percent',
-                validators: {
-                    notEmpty: {
-                        message: 'The percentage is required'
-                    },
-                    callback: {
-                        message: 'The sum must be 100',
-                        callback: function(value, validator) {
-                            var percentage = validator.getFieldElements('percentage'),
-                                length     = percentage.length,
-                                sum        = 0;
-                            for (var i = 0; i < length; i++) {
-                                sum += parseFloat($(percentage[i]).val());
-                            }
-                            if (sum == 100) {
-                                validator.updateStatus('percentage', 'VALID', 'callback');
-                                return true;
-                            }
+    $('#sumForm')
+        .bootstrapValidator({
+            feedbackIcons: {
+                valid: 'glyphicon glyphicon-ok',
+                invalid: 'glyphicon glyphicon-remove',
+                validating: 'glyphicon glyphicon-refresh'
+            },
+            fields: {
+                percentage: {
+                    selector: '.percent',
+                    validators: {
+                        notEmpty: {
+                            message: 'The percentage is required'
+                        },
+                        callback: {
+                            message: 'The sum must be 100',
+                            callback: function(value, validator) {
+                                var percentage = validator.getFieldElements('percentage'),
+                                    length     = percentage.length,
+                                    sum        = 0;
 
-                            return false;
+                                for (var i = 0; i < length; i++) {
+                                    sum += parseFloat($(percentage[i]).val());
+                                }
+                                if (sum == 100) {
+                                    validator.updateStatus('percentage', 'VALID', 'callback');
+                                    return true;
+                                }
+
+                                return false;
+                            }
                         }
                     }
                 }
             }
-        }
-    });
+        });
 });
 </script>
 </body>

dist/js/bootstrapValidator.js

@@ -345,6 +345,7 @@
                             .addClass('help-block')
                             .attr('data-bv-validator', validatorName)
                             .attr('data-bv-for', field)
+                            .attr('data-bv-result', this.STATUS_NOT_VALIDATED)
                             .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
                             .appendTo($message);
                     }
@@ -826,16 +827,17 @@
 
                     case this.STATUS_VALID:
                         // If the field is valid (passes all validators)
-                        isValidField = $allErrors.filter(function() {
-                                            var v = $(this).attr('data-bv-validator');
-                                            return $field.data('bv.result.' + v) != that.STATUS_VALID;
-                                        }).length == 0;
-                        this.disableSubmitButtons(this.$submitButton ? !this.isValid() : !isValidField);
-                        if ($icon) {
-                            $icon
-                                .removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid)
-                                .addClass(isValidField ? this.options.feedbackIcons.valid : this.options.feedbackIcons.invalid)
-                                .show();
+                        isValidField = ($allErrors.filter('[data-bv-result="' + this.STATUS_NOT_VALIDATED +'"]').length == 0)
+                                     ? ($allErrors.filter('[data-bv-result="' + this.STATUS_VALID +'"]').length == $allErrors.length)   // All validators are completed
+                                     : null;                                                                                            // There are some validators that have not done
+                        if (isValidField != null) {
+                            this.disableSubmitButtons(this.$submitButton ? !this.isValid() : !isValidField);
+                            if ($icon) {
+                                $icon
+                                    .removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid)
+                                    .addClass(isValidField ? this.options.feedbackIcons.valid : this.options.feedbackIcons.invalid)
+                                    .show();
+                            }
                         }
 
                         $parent.removeClass('has-error has-success').addClass(this.isValidContainer($parent) ? 'has-success' : 'has-error');

src/js/bootstrapValidator.js

@@ -344,6 +344,7 @@
                             .addClass('help-block')
                             .attr('data-bv-validator', validatorName)
                             .attr('data-bv-for', field)
+                            .attr('data-bv-result', this.STATUS_NOT_VALIDATED)
                             .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
                             .appendTo($message);
                     }
@@ -825,16 +826,17 @@
 
                     case this.STATUS_VALID:
                         // If the field is valid (passes all validators)
-                        isValidField = $allErrors.filter(function() {
-                                            var v = $(this).attr('data-bv-validator');
-                                            return $field.data('bv.result.' + v) != that.STATUS_VALID;
-                                        }).length == 0;
-                        this.disableSubmitButtons(this.$submitButton ? !this.isValid() : !isValidField);
-                        if ($icon) {
-                            $icon
-                                .removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid)
-                                .addClass(isValidField ? this.options.feedbackIcons.valid : this.options.feedbackIcons.invalid)
-                                .show();
+                        isValidField = ($allErrors.filter('[data-bv-result="' + this.STATUS_NOT_VALIDATED +'"]').length == 0)
+                                     ? ($allErrors.filter('[data-bv-result="' + this.STATUS_VALID +'"]').length == $allErrors.length)   // All validators are completed
+                                     : null;                                                                                            // There are some validators that have not done
+                        if (isValidField != null) {
+                            this.disableSubmitButtons(this.$submitButton ? !this.isValid() : !isValidField);
+                            if ($icon) {
+                                $icon
+                                    .removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid)
+                                    .addClass(isValidField ? this.options.feedbackIcons.valid : this.options.feedbackIcons.invalid)
+                                    .show();
+                            }
                         }
 
                         $parent.removeClass('has-error has-success').addClass(this.isValidContainer($parent) ? 'has-success' : 'has-error');