Home Explore Help
Sign In
githab
/
bootstrapvalidator
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Move #202, #206 out of built-in features, to an example of using events

nghuuphuoc 11 years ago
parent
b9ca73502b
commit
0bd2ba36e1
8 changed files with 53 additions and 79 deletions
Unified View Show Diff Stats
  1. 1 0
      CHANGELOG.md
  2. 47 2
      demo/tab.html
  3. 0 6
      dist/css/bootstrapValidator.css
  4. 1 1
      dist/css/bootstrapValidator.min.css
  5. 1 31
      dist/js/bootstrapValidator.js
  6. 2 2
      dist/js/bootstrapValidator.min.js
  7. 0 6
      src/css/bootstrapValidator.css
  8. 1 31
      src/js/bootstrapValidator.js

+ 1 - 0
CHANGELOG.md
View File 

@@ -13,6 +13,7 @@
 
 * [#297](https://github.com/nghuuphuoc/bootstrapvalidator/issues/297): Disable feedback icons for particular fields
 
 * [#297](https://github.com/nghuuphuoc/bootstrapvalidator/issues/297): Disable feedback icons for particular fields
 
 * [#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)
 
 * [#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)
 
 * [#274](https://github.com/nghuuphuoc/bootstrapvalidator/pull/274): Fix feedback icons in ```input-group```, thanks to [@tiagofontella](https://github.com/tiagofontella)
 
 * [#274](https://github.com/nghuuphuoc/bootstrapvalidator/pull/274): Fix feedback icons in ```input-group```, thanks to [@tiagofontella](https://github.com/tiagofontella)
 
+* [#202](https://github.com/nghuuphuoc/bootstrapvalidator/issues/202), [#206](https://github.com/nghuuphuoc/bootstrapvalidator/issues/206): Does NOT active the tab containing the first invalid field automatically. The success/error tabs will NOT add custom CSS classes as well. These features are demonstrated in an example of using events
 
 * [#282](https://github.com/nghuuphuoc/bootstrapvalidator/issues/282): Use error message that is returned from [```callback```](http://bootstrapvalidator.com/validators/callback/), [```remote```](http://bootstrapvalidator.com/validators/remote/) validators
 
 * [#282](https://github.com/nghuuphuoc/bootstrapvalidator/issues/282): Use error message that is returned from [```callback```](http://bootstrapvalidator.com/validators/callback/), [```remote```](http://bootstrapvalidator.com/validators/remote/) validators
 
 * [#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)
 
 * [#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)
 
 * [#288](https://github.com/nghuuphuoc/bootstrapvalidator/issues/288): Fix [```date``` validator](http://bootstrapvalidator.com/validators/date/) issue on IE8
 
 * [#288](https://github.com/nghuuphuoc/bootstrapvalidator/issues/288): Fix [```date``` validator](http://bootstrapvalidator.com/validators/date/) issue on IE8

+ 47 - 2
demo/tab.html
View File 

@@ -5,10 +5,20 @@
 
 
 
     <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
 
     <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
 
     <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
 
     <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
 
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
 
 
 
     <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
 
     <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
 
     <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
 
     <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
 
     <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
 
     <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
 
+
 
+    <style type="text/css">
 
+    .nav-tabs li.tab-success > a {
 
+        color: #3c763d;
 
+    }
 
+    .nav-tabs li.tab-error > a {
 
+        color: #a94442;
 
+    }
 
+    </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
     <div class="container">
 
     <div class="container">
 
@@ -20,8 +30,8 @@
 
                     </div>
 
                     </div>
 
 
 
                     <ul class="nav nav-tabs">
 
                     <ul class="nav nav-tabs">
 
-                        <li class="active"><a href="#info-tab" data-toggle="tab">Information</a></li>
 
-                        <li><a href="#address-tab" data-toggle="tab">Address</a></li>
 
+                        <li class="active"><a href="#info-tab" data-toggle="tab">Information <i class="fa"></i></a></li>
 
+                        <li><a href="#address-tab" data-toggle="tab">Address <i class="fa"></i></a></li>
 
                     </ul>
 
                     </ul>
 
 
 
                     <form id="accountForm" method="post" class="form-horizontal" action="target.php" style="margin-top: 20px;">
 
                     <form id="accountForm" method="post" class="form-horizontal" action="target.php" style="margin-top: 20px;">
 
@@ -128,6 +138,41 @@ $(document).ready(function() {
 
                     }
 
                     }
 
                 }
 
                 }
 
             }
 
             }
 
+        })
 
+        .on('error.form.bv', function(e) {
 
+            var $form         = $(e.target),
 
+                validator     = $form.data('bootstrapValidator'),
 
+                $invalidField = validator.getInvalidFields().eq(0),
 
+                $tabPane      = $invalidField.parents('.tab-pane'),
 
+                tabId         = $tabPane.attr('id');
 
+
 
+            // Activate the tab containing the invalid field if exists
 
+            if (tabId) {
 
+                $('a[href="#' + tabId + '"][data-toggle="tab"]').tab('show');
 
+            }
 
+        })
 
+        .on('status.field.bv', function(e, field, $field, status) {
 
+            var $form     = $(e.target),
 
+                validator = $form.data('bootstrapValidator'),
 
+                $tabPane  = $field.parents('.tab-pane'),
 
+                tabId     = $tabPane.attr('id');
 
+            if (tabId) {
 
+                var $tab = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent();
 
+
 
+                // Add custom class to tab containing the field
 
+                if ($tab) {
 
+                    $tab.removeClass('tab-success').removeClass('tab-error');
 
+                    if (status == validator.STATUS_INVALID) {
 
+                        $tab.addClass('tab-error').find('i').removeClass('fa-check').addClass('fa-times');
 
+                    } else if (status == validator.STATUS_VALID) {
 
+                        var isValidTab = validator.isValidContainer($tabPane);
 
+                        $tab.addClass(isValidTab ? 'tab-success' : 'tab-error')
 
+                            .find('i')
 
+                                .removeClass('fa-check fa-times')
 
+                                .addClass(isValidTab ? 'fa-check' : 'fa-times');
 
+                    }
 
+                }
 
+            }
 
         });
 
         });
 
 });
 
 });
 
 </script>
 
 </script>

+ 0 - 6
dist/css/bootstrapValidator.css
View File 

@@ -11,12 +11,6 @@
 
 .bv-form .help-block {
 
 .bv-form .help-block {
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
 }
 
 }
 
-.nav-tabs li.bv-tab-success > a {
 
-    color: #3c763d;
 
-}
 
-.nav-tabs li.bv-tab-error > a {
 
-    color: #a94442;
 
-}
 
 .bv-form .tooltip-inner {
 
 .bv-form .tooltip-inner {
 
     text-align: left;
 
     text-align: left;
 
 }
 
 }

+ 1 - 1
dist/css/bootstrapValidator.min.css
View File 

@@ -10,4 +10,4 @@
 
  */
 
  */
 
 
 
 
 
-.bv-form .help-block{margin-bottom:0}.nav-tabs li.bv-tab-success>a{color:#3c763d}.nav-tabs li.bv-tab-error>a{color:#a94442}.bv-form .tooltip-inner{text-align:left}
 
+.bv-form .help-block{margin-bottom:0}.bv-form .tooltip-inner{text-align:left}

+ 1 - 31
dist/js/bootstrapValidator.js
View File 

@@ -489,17 +489,7 @@
 
             }
 
             }
 
 
 
             // Focus to the first invalid field
 
             // Focus to the first invalid field
 
-            var $firstInvalidField = this.$invalidFields.eq(0);
 
-            if ($firstInvalidField) {
 
-                // Activate the tab containing the invalid field if exists
 
-                var $tab = $firstInvalidField.parents('.tab-pane'),
 
-                    tabId;
 
-                if ($tab && (tabId = $tab.attr('id'))) {
 
-                    $('a[href="#' + tabId + '"][data-toggle="tab"]').trigger('click.bs.tab.data-api');
 
-                }
 
-
 
-                $firstInvalidField.focus();
 
-            }
 
+            this.$invalidFields.eq(0).focus();
 
         },
 
         },
 
 
 
         /**
 
         /**
 
@@ -753,14 +743,6 @@
 
                 }
 
                 }
 
             }
 
             }
 
 
 
-            // Determine the tab containing the element
 
-            var $tabPane = $field.parents('.tab-pane'),
 
-                tabId,
 
-                $tab;
 
-            if ($tabPane && (tabId = $tabPane.attr('id'))) {
 
-                $tab = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent();
 
-            }
 
-
 
             // Show/hide error elements and feedback icons
 
             // Show/hide error elements and feedback icons
 
             $errors.attr('data-bv-result', status);
 
             $errors.attr('data-bv-result', status);
 
             switch (status) {
 
             switch (status) {
 
@@ -771,9 +753,6 @@
 
                     if ($icon) {
 
                     if ($icon) {
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
                     }
 
                     }
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_INVALID:
 
                 case this.STATUS_INVALID:
 
@@ -783,9 +762,6 @@
 
                     if ($icon) {
 
                     if ($icon) {
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
                     }
 
                     }
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').addClass('bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_VALID:
 
                 case this.STATUS_VALID:
 
@@ -803,9 +779,6 @@
 
                     }
 
                     }
 
 
 
                     $parent.removeClass('has-error has-success').addClass(this.isValidContainer($parent) ? 'has-success' : 'has-error');
 
                     $parent.removeClass('has-error has-success').addClass(this.isValidContainer($parent) ? 'has-success' : 'has-error');
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error').addClass(this.isValidContainer($tabPane) ? 'bv-tab-success' : 'bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_NOT_VALIDATED:
 
                 case this.STATUS_NOT_VALIDATED:
 
@@ -816,9 +789,6 @@
 
                     if ($icon) {
 
                     if ($icon) {
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
                     }
 
                     }
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
             }
 
             }

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


+ 0 - 6
src/css/bootstrapValidator.css
View File 

@@ -11,12 +11,6 @@
 
 .bv-form .help-block {
 
 .bv-form .help-block {
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
 }
 
 }
 
-.nav-tabs li.bv-tab-success > a {
 
-    color: #3c763d;
 
-}
 
-.nav-tabs li.bv-tab-error > a {
 
-    color: #a94442;
 
-}
 
 .bv-form .tooltip-inner {
 
 .bv-form .tooltip-inner {
 
     text-align: left;
 
     text-align: left;
 
 }
 
 }

+ 1 - 31
src/js/bootstrapValidator.js
View File 

@@ -488,17 +488,7 @@
 
             }
 
             }
 
 
 
             // Focus to the first invalid field
 
             // Focus to the first invalid field
 
-            var $firstInvalidField = this.$invalidFields.eq(0);
 
-            if ($firstInvalidField) {
 
-                // Activate the tab containing the invalid field if exists
 
-                var $tab = $firstInvalidField.parents('.tab-pane'),
 
-                    tabId;
 
-                if ($tab && (tabId = $tab.attr('id'))) {
 
-                    $('a[href="#' + tabId + '"][data-toggle="tab"]').trigger('click.bs.tab.data-api');
 
-                }
 
-
 
-                $firstInvalidField.focus();
 
-            }
 
+            this.$invalidFields.eq(0).focus();
 
         },
 
         },
 
 
 
         /**
 
         /**
 
@@ -752,14 +742,6 @@
 
                 }
 
                 }
 
             }
 
             }
 
 
 
-            // Determine the tab containing the element
 
-            var $tabPane = $field.parents('.tab-pane'),
 
-                tabId,
 
-                $tab;
 
-            if ($tabPane && (tabId = $tabPane.attr('id'))) {
 
-                $tab = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent();
 
-            }
 
-
 
             // Show/hide error elements and feedback icons
 
             // Show/hide error elements and feedback icons
 
             $errors.attr('data-bv-result', status);
 
             $errors.attr('data-bv-result', status);
 
             switch (status) {
 
             switch (status) {
 
@@ -770,9 +752,6 @@
 
                     if ($icon) {
 
                     if ($icon) {
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
 
                     }
 
                     }
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_INVALID:
 
                 case this.STATUS_INVALID:
 
@@ -782,9 +761,6 @@
 
                     if ($icon) {
 
                     if ($icon) {
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
 
                     }
 
                     }
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').addClass('bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_VALID:
 
                 case this.STATUS_VALID:
 
@@ -802,9 +778,6 @@
 
                     }
 
                     }
 
 
 
                     $parent.removeClass('has-error has-success').addClass(this.isValidContainer($parent) ? 'has-success' : 'has-error');
 
                     $parent.removeClass('has-error has-success').addClass(this.isValidContainer($parent) ? 'has-success' : 'has-error');
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error').addClass(this.isValidContainer($tabPane) ? 'bv-tab-success' : 'bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_NOT_VALIDATED:
 
                 case this.STATUS_NOT_VALIDATED:
 
@@ -815,9 +788,6 @@
 
                     if ($icon) {
 
                     if ($icon) {
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
                         $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
 
                     }
 
                     }
 
-                    if ($tab) {
 
-                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error');
 
-                    }
 
                     break;
 
                     break;
 
             }
 
             }