Browse Source

Refactor: Remove setNotValidated(), use updateStatus() instead

nghuuphuoc 11 years ago
parent
commit
ae9841673a
6 changed files with 79 additions and 162 deletions
  1. 3 3
      demo/date.html
  2. 0 1
      demo/enable.html
  3. 5 5
      demo/index.html
  4. 35 76
      dist/js/bootstrapValidator.js
  5. 1 1
      dist/js/bootstrapValidator.min.js
  6. 35 76
      src/js/bootstrapValidator.js

+ 3 - 3
demo/date.html

@@ -146,9 +146,9 @@ $(document).ready(function() {
         .on('dp.change dp.show', function(e) {
             // Validate the date when user change it
             $('#defaultForm')
-                .data('bootstrapValidator')         // Get the bootstrapValidator instance
-                .setNotValidated('datetimePicker')  // Mark the field as not validated, so it'll be re-validated when the user change date
-                .validateField('datetimePicker');   // Validate the field
+                .data('bootstrapValidator')                                 // Get the bootstrapValidator instance
+                .updateStatus('datetimePicker', 'not_validated', null)      // Mark the field as not validated, so it'll be re-validated when the user change date
+                .validateField('datetimePicker');                           // Validate the field
         });
 });
 </script>

+ 0 - 1
demo/enable.html

@@ -194,7 +194,6 @@ $(document).ready(function() {
         var bootstrapValidator = $('#checkoutForm').data('bootstrapValidator'),
             shipNewAddress     = ($(this).val() == 'new');
 
-        //$('#newAddress').toggle();
         shipNewAddress ? $('#newAddress').find('.form-control').removeAttr('disabled')
                        : $('#newAddress').find('.form-control').attr('disabled', 'disabled');
 

+ 5 - 5
demo/index.html

@@ -199,11 +199,11 @@ $(document).ready(function() {
     $('#defaultForm').bootstrapValidator({
 //        live: 'disabled',
         message: 'This value is not valid',
-        feedbackIcons: {
-            valid: 'glyphicon glyphicon-ok',
-            invalid: 'glyphicon glyphicon-remove',
-            validating: 'glyphicon glyphicon-refresh'
-        },
+//        feedbackIcons: {
+//            valid: 'glyphicon glyphicon-ok',
+//            invalid: 'glyphicon glyphicon-remove',
+//            validating: 'glyphicon glyphicon-refresh'
+//        },
         fields: {
             firstName: {
                 validators: {

+ 35 - 76
dist/js/bootstrapValidator.js

@@ -54,7 +54,11 @@
         //      invalid: 'fa fa-times',
         //      validating: 'fa fa-refresh'
         //  }
-        feedbackIcons: null,
+        feedbackIcons: {
+            valid: null,
+            invalid: null,
+            validating: null
+        },
 
         // The submit buttons selector
         // These buttons will be disabled to prevent the valid form from multiple submissions
@@ -177,7 +181,7 @@
                 type  = fields.attr('type'),
                 event = ('radio' == type || 'checkbox' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup';
             fields.on(event, function() {
-                that.setNotValidated(field);
+                that.updateStatus($field, that.STATUS_NOT_VALIDATED, null);
             });
         },
 
@@ -391,54 +395,48 @@
         /**
          * Update field status
          *
-         * @param {jQuery} $field The field element
-         * @param {String} validatorName The validator name
+         * @param {String|jQuery} field The field name or field element
          * @param {String} status The status
-         * Can be STATUS_VALIDATING, STATUS_INVALID, STATUS_VALID
+         * 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
          * @return {BootstrapValidator}
          */
-        updateStatus: function($field, status, validatorName) {
-            var that     = this,
+        updateStatus: function(field, status, validatorName) {
+            var $field   = ('string' == typeof field) ? this.getFieldElements(field) : field,
+                that     = this,
                 field    = $field.attr('name'),
                 $parent  = $field.parents('.form-group'),
                 $message = $field.data('bootstrapValidator.messageContainer'),
                 $errors  = $message.find('.help-block[data-bs-validator]');
 
+            // Update status
+            if (validatorName) {
+                this.results[field][validatorName] = status;
+            } else {
+                for (var v in this.options.fields[field].validators) {
+                    this.results[field][v] = status;
+                }
+            }
+
+            // Show/hide error elements and feedback icons
             switch (status) {
                 case this.STATUS_VALIDATING:
-                    this.results[field][validatorName] = this.STATUS_VALIDATING;
                     this._disableSubmitButtons(true);
-
                     $parent.removeClass('has-success').removeClass('has-error');
                     // TODO: Show validating message
-                    $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide();
-
-                    if (this.options.feedbackIcons) {
-                        // Show validating icon
-                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
-                    }
+                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
+                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
                     break;
 
                 case this.STATUS_INVALID:
-                    this.results[field][validatorName] = this.STATUS_INVALID;
                     this._disableSubmitButtons(true);
-
-                    // Add has-error class to parent element
                     $parent.removeClass('has-success').addClass('has-error');
-
-                    $errors.filter('[data-bs-validator="' + validatorName + '"]').show();
-
-                    if (this.options.feedbackIcons) {
-                        // Show invalid icon
-                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
-                    }
+                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').show() : $errors.show();
+                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
                     break;
 
                 case this.STATUS_VALID:
-                    this.results[field][validatorName] = this.STATUS_VALID;
-
-                    // Hide error element
-                    $errors.filter('[data-bs-validator="' + validatorName + '"]').hide();
+                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
                     // If the field is valid
                     if ($errors.filter(function() {
@@ -447,38 +445,23 @@
                         }).length == 0
                     ) {
                         this._disableSubmitButtons(false);
-
                         $parent.removeClass('has-error').addClass('has-success');
-                        // Show valid icon
-                        if (this.options.feedbackIcons) {
-                            $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
-                        }
+                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
                     }
                     break;
 
+                case this.STATUS_NOT_VALIDATED:
                 default:
+                    this._disableSubmitButtons(false);
+                    $parent.removeClass('has-success').removeClass('has-error');
+                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
+                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
                     break;
             }
 
             return this;
         },
 
-        /**
-         * Mark a field as not validated yet
-         * The plugin doesn't re-validate a field if it is marked as valid.
-         * In some cases, we need to force the plugin validate it again
-         *
-         * @param {String} field The field name
-         * @returns {BootstrapValidator}
-         */
-        setNotValidated: function(field) {
-            for (var v in this.options.fields[field].validators) {
-                this.results[field][v] = this.STATUS_NOT_VALIDATED;
-            }
-
-            return this;
-        },
-
         // Useful APIs which aren't used internally
 
         /**
@@ -493,26 +476,15 @@
                 this.results[field] = {};
 
                 // Mark field as not validated yet
-                this.setNotValidated(field);
+                this.updateStatus(field, this.STATUS_NOT_VALIDATED, null);
             }
 
             this.invalidField  = null;
             this.$submitButton = null;
 
-            // Hide all error elements
-            this.$form
-                .find('.has-error').removeClass('has-error').end()
-                .find('.has-success').removeClass('has-success').end()
-                .find('.help-block[data-bs-validator]').hide();
-
             // Enable submit buttons
             this._disableSubmitButtons(false);
 
-            // Hide all feedback icons
-            if (this.options.feedbackIcons) {
-                this.$form.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
-            }
-
             if (resetFormData) {
                 this.$form.get(0).reset();
             }
@@ -529,20 +501,7 @@
          */
         enableFieldValidators: function(field, enabled) {
             this.options.fields[field]['enabled'] = enabled;
-            if (enabled) {
-                this.setNotValidated(field);
-            } else {
-                var $field   = this.getFieldElements(field),
-                    $message = $field.data('bootstrapValidator.messageContainer');
-
-                $field.parents('.form-group').removeClass('has-success has-error');
-                $message.find('.help-block[data-bs-validator]').hide();
-                if (this.options.feedbackIcons) {
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid).hide();
-                }
-
-                this._disableSubmitButtons(false);
-            }
+            this.updateStatus(field, this.STATUS_NOT_VALIDATED, null);
 
             return this;
         }

File diff suppressed because it is too large
+ 1 - 1
dist/js/bootstrapValidator.min.js


+ 35 - 76
src/js/bootstrapValidator.js

@@ -53,7 +53,11 @@
         //      invalid: 'fa fa-times',
         //      validating: 'fa fa-refresh'
         //  }
-        feedbackIcons: null,
+        feedbackIcons: {
+            valid: null,
+            invalid: null,
+            validating: null
+        },
 
         // The submit buttons selector
         // These buttons will be disabled to prevent the valid form from multiple submissions
@@ -176,7 +180,7 @@
                 type  = fields.attr('type'),
                 event = ('radio' == type || 'checkbox' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup';
             fields.on(event, function() {
-                that.setNotValidated(field);
+                that.updateStatus($field, that.STATUS_NOT_VALIDATED, null);
             });
         },
 
@@ -390,54 +394,48 @@
         /**
          * Update field status
          *
-         * @param {jQuery} $field The field element
-         * @param {String} validatorName The validator name
+         * @param {String|jQuery} field The field name or field element
          * @param {String} status The status
-         * Can be STATUS_VALIDATING, STATUS_INVALID, STATUS_VALID
+         * 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
          * @return {BootstrapValidator}
          */
-        updateStatus: function($field, status, validatorName) {
-            var that     = this,
+        updateStatus: function(field, status, validatorName) {
+            var $field   = ('string' == typeof field) ? this.getFieldElements(field) : field,
+                that     = this,
                 field    = $field.attr('name'),
                 $parent  = $field.parents('.form-group'),
                 $message = $field.data('bootstrapValidator.messageContainer'),
                 $errors  = $message.find('.help-block[data-bs-validator]');
 
+            // Update status
+            if (validatorName) {
+                this.results[field][validatorName] = status;
+            } else {
+                for (var v in this.options.fields[field].validators) {
+                    this.results[field][v] = status;
+                }
+            }
+
+            // Show/hide error elements and feedback icons
             switch (status) {
                 case this.STATUS_VALIDATING:
-                    this.results[field][validatorName] = this.STATUS_VALIDATING;
                     this._disableSubmitButtons(true);
-
                     $parent.removeClass('has-success').removeClass('has-error');
                     // TODO: Show validating message
-                    $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide();
-
-                    if (this.options.feedbackIcons) {
-                        // Show validating icon
-                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
-                    }
+                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
+                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
                     break;
 
                 case this.STATUS_INVALID:
-                    this.results[field][validatorName] = this.STATUS_INVALID;
                     this._disableSubmitButtons(true);
-
-                    // Add has-error class to parent element
                     $parent.removeClass('has-success').addClass('has-error');
-
-                    $errors.filter('[data-bs-validator="' + validatorName + '"]').show();
-
-                    if (this.options.feedbackIcons) {
-                        // Show invalid icon
-                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
-                    }
+                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').show() : $errors.show();
+                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
                     break;
 
                 case this.STATUS_VALID:
-                    this.results[field][validatorName] = this.STATUS_VALID;
-
-                    // Hide error element
-                    $errors.filter('[data-bs-validator="' + validatorName + '"]').hide();
+                    validatorName ? $errors.filter('[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
 
                     // If the field is valid
                     if ($errors.filter(function() {
@@ -446,38 +444,23 @@
                         }).length == 0
                     ) {
                         this._disableSubmitButtons(false);
-
                         $parent.removeClass('has-error').addClass('has-success');
-                        // Show valid icon
-                        if (this.options.feedbackIcons) {
-                            $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
-                        }
+                        $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.valid).show();
                     }
                     break;
 
+                case this.STATUS_NOT_VALIDATED:
                 default:
+                    this._disableSubmitButtons(false);
+                    $parent.removeClass('has-success').removeClass('has-error');
+                    validatorName ? $errors.filter('.help-block[data-bs-validator="' + validatorName + '"]').hide() : $errors.hide();
+                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
                     break;
             }
 
             return this;
         },
 
-        /**
-         * Mark a field as not validated yet
-         * The plugin doesn't re-validate a field if it is marked as valid.
-         * In some cases, we need to force the plugin validate it again
-         *
-         * @param {String} field The field name
-         * @returns {BootstrapValidator}
-         */
-        setNotValidated: function(field) {
-            for (var v in this.options.fields[field].validators) {
-                this.results[field][v] = this.STATUS_NOT_VALIDATED;
-            }
-
-            return this;
-        },
-
         // Useful APIs which aren't used internally
 
         /**
@@ -492,26 +475,15 @@
                 this.results[field] = {};
 
                 // Mark field as not validated yet
-                this.setNotValidated(field);
+                this.updateStatus(field, this.STATUS_NOT_VALIDATED, null);
             }
 
             this.invalidField  = null;
             this.$submitButton = null;
 
-            // Hide all error elements
-            this.$form
-                .find('.has-error').removeClass('has-error').end()
-                .find('.has-success').removeClass('has-success').end()
-                .find('.help-block[data-bs-validator]').hide();
-
             // Enable submit buttons
             this._disableSubmitButtons(false);
 
-            // Hide all feedback icons
-            if (this.options.feedbackIcons) {
-                this.$form.find('.form-control-feedback').removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
-            }
-
             if (resetFormData) {
                 this.$form.get(0).reset();
             }
@@ -528,20 +500,7 @@
          */
         enableFieldValidators: function(field, enabled) {
             this.options.fields[field]['enabled'] = enabled;
-            if (enabled) {
-                this.setNotValidated(field);
-            } else {
-                var $field   = this.getFieldElements(field),
-                    $message = $field.data('bootstrapValidator.messageContainer');
-
-                $field.parents('.form-group').removeClass('has-success has-error');
-                $message.find('.help-block[data-bs-validator]').hide();
-                if (this.options.feedbackIcons) {
-                    $message.find('.form-control-feedback').removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid).hide();
-                }
-
-                this._disableSubmitButtons(false);
-            }
+            this.updateStatus(field, this.STATUS_NOT_VALIDATED, null);
 
             return this;
         }