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

#206: Indicate success/error tab

nghuuphuoc 12 years ago
parent
010ceea25f
commit
ba9a517949
8 changed files with 229 additions and 31 deletions
Unified View Show Diff Stats
  1. 1 0
      CHANGELOG.md
  2. 135 0
      demo/tab.html
  3. 7 1
      dist/css/bootstrapValidator.css
  4. 1 1
      dist/css/bootstrapValidator.min.css
  5. 38 13
      dist/js/bootstrapValidator.js
  6. 2 2
      dist/js/bootstrapValidator.min.js
  7. 7 1
      src/css/bootstrapValidator.css
  8. 38 13
      src/js/bootstrapValidator.js

+ 1 - 0
CHANGELOG.md
View File 

@@ -10,6 +10,7 @@
 
 * [#216](https://github.com/nghuuphuoc/bootstrapvalidator/issues/216): Add ISMN (International Standard Music Number) validator
 
 * [#216](https://github.com/nghuuphuoc/bootstrapvalidator/issues/216): Add ISMN (International Standard Music Number) validator
 
 * [#217](https://github.com/nghuuphuoc/bootstrapvalidator/issues/217): Add ISSN (International Standard Serial Number) validator
 
 * [#217](https://github.com/nghuuphuoc/bootstrapvalidator/issues/217): Add ISSN (International Standard Serial Number) validator
 
 * [#191](https://github.com/nghuuphuoc/bootstrapvalidator/issues/191), [#223](https://github.com/nghuuphuoc/bootstrapvalidator/issues/223): Support using both the ```name``` attribute and ```selector``` option for field
 
 * [#191](https://github.com/nghuuphuoc/bootstrapvalidator/issues/191), [#223](https://github.com/nghuuphuoc/bootstrapvalidator/issues/223): Support using both the ```name``` attribute and ```selector``` option for field
 
+* [#206](https://github.com/nghuuphuoc/bootstrapvalidator/issues/206): Indicate success/error tab
 
 * [#220](https://github.com/nghuuphuoc/bootstrapvalidator/issues/220): Add UK postcode support for the [```zipCode``` validator](http://bootstrapvalidator.com/validators/zip-code/)
 
 * [#220](https://github.com/nghuuphuoc/bootstrapvalidator/issues/220): Add UK postcode support for the [```zipCode``` validator](http://bootstrapvalidator.com/validators/zip-code/)
 
 * [#229](https://github.com/nghuuphuoc/bootstrapvalidator/issues/229): The [```date``` validator](http://bootstrapvalidator.com/validators/date/) supports seconds
 
 * [#229](https://github.com/nghuuphuoc/bootstrapvalidator/issues/229): The [```date``` validator](http://bootstrapvalidator.com/validators/date/) supports seconds

+ 135 - 0
demo/tab.html
View File 

@@ -0,0 +1,135 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <title>BootstrapValidator demo</title>
 
+
 
+    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
 
+    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
 
+
 
+    <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="../dist/js/bootstrapValidator.js"></script>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="row">
 
+            <section>
 
+                <div class="col-lg-8 col-lg-offset-2">
 
+                    <div class="page-header">
 
+                        <h2>Tab example</h2>
 
+                    </div>
 
+
 
+                    <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>
 
+                    </ul>
 
+
 
+                    <form id="accountForm" method="post" class="form-horizontal" action="target.php" style="margin-top: 20px;">
 
+                        <div class="tab-content">
 
+                            <div class="tab-pane active" id="info-tab">
 
+                                <div class="form-group">
 
+                                    <label class="col-lg-3 control-label">Full name</label>
 
+                                    <div class="col-lg-5">
 
+                                        <input type="text" class="form-control" name="fullName" />
 
+                                    </div>
 
+                                </div>
 
+                                <div class="form-group">
 
+                                    <label class="col-lg-3 control-label">Company</label>
 
+                                    <div class="col-lg-5">
 
+                                        <input type="text" class="form-control" name="company" />
 
+                                    </div>
 
+                                </div>
 
+                                <div class="form-group">
 
+                                    <label class="col-lg-3 control-label">Job title</label>
 
+                                    <div class="col-lg-5">
 
+                                        <input type="text" class="form-control" name="jobTitle" />
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="tab-pane" id="address-tab">
 
+                                <div class="form-group">
 
+                                    <label class="col-lg-3 control-label">Address</label>
 
+                                    <div class="col-lg-5">
 
+                                        <input type="text" class="form-control" name="address" />
 
+                                    </div>
 
+                                </div>
 
+                                <div class="form-group">
 
+                                    <label class="col-lg-3 control-label">City</label>
 
+                                    <div class="col-lg-5">
 
+                                        <input type="text" class="form-control" name="city" />
 
+                                    </div>
 
+                                </div>
 
+                                <div class="form-group">
 
+                                    <label class="col-lg-3 control-label">Country</label>
 
+                                    <div class="col-lg-5">
 
+                                        <select class="form-control" name="country">
 
+                                            <option value="">Select a country</option>
 
+                                            <option value="FR">France</option>
 
+                                            <option value="DE">Germany</option>
 
+                                            <option value="IT">Italy</option>
 
+                                            <option value="JP">Japan</option>
 
+                                            <option value="RU">Russian</option>
 
+                                            <option value="US">United State</option>
 
+                                            <option value="GB">United Kingdom</option>
 
+                                            <option value="other">Other</option>
 
+                                        </select>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="form-group">
 
+                            <div class="col-lg-5 col-lg-offset-3">
 
+                                <button type="submit" class="btn btn-primary">Validate</button>
 
+                            </div>
 
+                        </div>
 
+                    </form>
 
+                </div>
 
+            </section>
 
+        </div>
 
+    </div>
 
+
 
+<script type="text/javascript">
 
+$(document).ready(function() {
 
+    $('#accountForm')
 
+        .bootstrapValidator({
 
+            excluded: [':disabled'],
 
+            feedbackIcons: {
 
+                valid: 'glyphicon glyphicon-ok',
 
+                invalid: 'glyphicon glyphicon-remove',
 
+                validating: 'glyphicon glyphicon-refresh'
 
+            },
 
+            fields: {
 
+                fullName: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The full name is required'
 
+                        }
 
+                    }
 
+                },
 
+                company: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The company name is required'
 
+                        }
 
+                    }
 
+                },
 
+                address: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The address is required'
 
+                        }
 
+                    }
 
+                },
 
+                city: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The city is required'
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        });
 
+});
 
+</script>
 
+</body>
 
+</html>

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

@@ -8,6 +8,12 @@
 
  * @license     MIT
 
  * @license     MIT
 
  */
 
  */
 
 
 
-.bootstrap-validator-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;
 
+}

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

@@ -10,4 +10,4 @@
 
  */
 
  */
 
 
 
 
 
-.bootstrap-validator-form .help-block{margin-bottom:0}
 
+.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}

+ 38 - 13
dist/js/bootstrapValidator.js
View File 

@@ -46,7 +46,7 @@
 
     // The default options
 
     // The default options
 
     BootstrapValidator.DEFAULT_OPTIONS = {
 
     BootstrapValidator.DEFAULT_OPTIONS = {
 
         // The form CSS class
 
         // The form CSS class
 
-        elementClass: 'bootstrap-validator-form',
 
+        elementClass: 'bv-form',
 
 
 
         // Default invalid message
 
         // Default invalid message
 
         message: 'This value is not valid',
 
         message: 'This value is not valid',
 
@@ -286,6 +286,7 @@
 
                         $('<small/>')
 
                         $('<small/>')
 
                             .css('display', 'none')
 
                             .css('display', 'none')
 
                             .attr('data-bv-validator', validatorName)
 
                             .attr('data-bv-validator', validatorName)
 
+                            .attr('data-bv-validator-for', field)
 
                             .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
                             .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
                             .addClass('help-block')
 
                             .addClass('help-block')
 
                             .appendTo($message);
 
                             .appendTo($message);
 
@@ -593,13 +594,12 @@
 
          * @return {BootstrapValidator}
 
          * @return {BootstrapValidator}
 
          */
 
          */
 
         updateElementStatus: function($field, status, validatorName) {
 
         updateElementStatus: function($field, status, validatorName) {
 
-            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 + '"]');
 
+            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 + '"]');
 
 
 
             // Update status
 
             // Update status
 
             if (validatorName) {
 
             if (validatorName) {
 
@@ -610,6 +610,14 @@
 
                 }
 
                 }
 
             }
 
             }
 
 
 
+            // 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
 
             switch (status) {
 
             switch (status) {
 
                 case this.STATUS_VALIDATING:
 
                 case this.STATUS_VALIDATING:
 
@@ -620,6 +628,9 @@
 
                     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:
 
@@ -629,6 +640,9 @@
 
                     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:
 
@@ -647,12 +661,20 @@
 
                             .show();
 
                             .show();
 
                     }
 
                     }
 
 
 
-                    // Check if all fields in the same row are valid
 
-                    var validRow = ($rowErrors.filter(function() {
 
+                    // Check if all elements in given container are valid
 
+                    var isValidContainer = function($container) {
 
+                        return $container
 
+                                    .find('.help-block[data-bv-validator]')
 
+                                    .filter(function() {
 
                                         var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                                         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');
 
+                                        return ('block' == display) || ($field.data('bv.result.' + v) && $field.data('bv.result.' + v) != that.STATUS_VALID);
 
+                                    })
 
+                                    .length == 0;
 
+                    };
 
+                    $parent.removeClass('has-error has-success').addClass(isValidContainer($parent) ? 'has-success' : 'has-error');
 
+                    if ($tab) {
 
+                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error').addClass(isValidContainer($tabPane) ? 'bv-tab-success' : 'bv-tab-error');
 
+                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_NOT_VALIDATED:
 
                 case this.STATUS_NOT_VALIDATED:
 
@@ -663,6 +685,9 @@
 
                     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


+ 7 - 1
src/css/bootstrapValidator.css
View File 

@@ -8,6 +8,12 @@
 
  * @license     MIT
 
  * @license     MIT
 
  */
 
  */
 
 
 
-.bootstrap-validator-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;
 
+}

+ 38 - 13
src/js/bootstrapValidator.js
View File 

@@ -45,7 +45,7 @@
 
     // The default options
 
     // The default options
 
     BootstrapValidator.DEFAULT_OPTIONS = {
 
     BootstrapValidator.DEFAULT_OPTIONS = {
 
         // The form CSS class
 
         // The form CSS class
 
-        elementClass: 'bootstrap-validator-form',
 
+        elementClass: 'bv-form',
 
 
 
         // Default invalid message
 
         // Default invalid message
 
         message: 'This value is not valid',
 
         message: 'This value is not valid',
 
@@ -285,6 +285,7 @@
 
                         $('<small/>')
 
                         $('<small/>')
 
                             .css('display', 'none')
 
                             .css('display', 'none')
 
                             .attr('data-bv-validator', validatorName)
 
                             .attr('data-bv-validator', validatorName)
 
+                            .attr('data-bv-validator-for', field)
 
                             .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
                             .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
 
                             .addClass('help-block')
 
                             .addClass('help-block')
 
                             .appendTo($message);
 
                             .appendTo($message);
 
@@ -592,13 +593,12 @@
 
          * @return {BootstrapValidator}
 
          * @return {BootstrapValidator}
 
          */
 
          */
 
         updateElementStatus: function($field, status, validatorName) {
 
         updateElementStatus: function($field, status, validatorName) {
 
-            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 + '"]');
 
+            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 + '"]');
 
 
 
             // Update status
 
             // Update status
 
             if (validatorName) {
 
             if (validatorName) {
 
@@ -609,6 +609,14 @@
 
                 }
 
                 }
 
             }
 
             }
 
 
 
+            // 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
 
             switch (status) {
 
             switch (status) {
 
                 case this.STATUS_VALIDATING:
 
                 case this.STATUS_VALIDATING:
 
@@ -619,6 +627,9 @@
 
                     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:
 
@@ -628,6 +639,9 @@
 
                     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:
 
@@ -646,12 +660,20 @@
 
                             .show();
 
                             .show();
 
                     }
 
                     }
 
 
 
-                    // Check if all fields in the same row are valid
 
-                    var validRow = ($rowErrors.filter(function() {
 
+                    // Check if all elements in given container are valid
 
+                    var isValidContainer = function($container) {
 
+                        return $container
 
+                                    .find('.help-block[data-bv-validator]')
 
+                                    .filter(function() {
 
                                         var display = $(this).css('display'), v = $(this).attr('data-bv-validator');
 
                                         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');
 
+                                        return ('block' == display) || ($field.data('bv.result.' + v) && $field.data('bv.result.' + v) != that.STATUS_VALID);
 
+                                    })
 
+                                    .length == 0;
 
+                    };
 
+                    $parent.removeClass('has-error has-success').addClass(isValidContainer($parent) ? 'has-success' : 'has-error');
 
+                    if ($tab) {
 
+                        $tab.removeClass('bv-tab-success').removeClass('bv-tab-error').addClass(isValidContainer($tabPane) ? 'bv-tab-success' : 'bv-tab-error');
 
+                    }
 
                     break;
 
                     break;
 
 
 
                 case this.STATUS_NOT_VALIDATED:
 
                 case this.STATUS_NOT_VALIDATED:
 
@@ -662,6 +684,9 @@
 
                     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;
 
             }
 
             }