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

#1050: When using multiple fields with same name, the tooltip of the last element is always shown

Phuoc Nguyen 11 years ago
parent
4e39b710af
commit
62fb9a3589
6 changed files with 65 additions and 62 deletions
Split View Show Diff Stats
  1. 1 0
      CHANGELOG.md
  2. 30 46
      demo/multiple.html
  3. 1 1
      dist/css/bootstrapValidator.min.css
  4. 16 7
      dist/js/bootstrapValidator.js
  5. 2 2
      dist/js/bootstrapValidator.min.js
  6. 15 6
      src/js/bootstrapValidator.js

+ 1 - 0
CHANGELOG.md
View File 

@@ -27,6 +27,7 @@ __Bug Fixes__
 
 * [#991](https://github.com/nghuuphuoc/bootstrapvalidator/issues/991): The field is validated only one time when setting ```trigger: 'blur'```, ```container: 'tooltip'```
 
 * [#1014](https://github.com/nghuuphuoc/bootstrapvalidator/pull/1014): Fix [isValidField()](http://bootstrapvalidator.com/api/#is-valid-field) and [validateField()](http://bootstrapvalidator.com/api/#validate-field) methods for fields without validators, thanks to [@jazzzz](https://github.com/jazzzz)
 
 * [#1040](https://github.com/nghuuphuoc/bootstrapvalidator/issues/1040), [#1041](https://github.com/nghuuphuoc/bootstrapvalidator/pull/1041): Fix the issue where input with placeholder is auto validated on IE 10, 11, thanks to [@jazzzz](https://github.com/jazzzz)
 
+* [#1050](https://github.com/nghuuphuoc/bootstrapvalidator/issues/1050): Fix the issue when using multiple fields with same name, the tooltip of the last element is always shown
 
 
 __Document__
 
 * [#848](https://github.com/nghuuphuoc/bootstrapvalidator/pull/848): Update the [stringLength](http://bootstrapvalidator.com/validators/stringLength) document, thanks to [@Relequestual](https://github.com/Relequestual)

+ 30 - 46
demo/multiple.html
View File 

@@ -13,7 +13,6 @@
 
 <body>
 
 <div class="container">
 
     <div class="row">
 
-        <!-- form: -->
 
         <section>
 
             <div class="col-lg-8 col-lg-offset-2">
 
                 <div class="page-header">
 
@@ -108,58 +107,43 @@
 
                 </form>
 
             </div>
 
         </section>
 
-        <!-- :form -->
 
     </div>
 
 </div>
 
 
 <script type="text/javascript">
 
-    $(document).ready(function() {
 
-        $('#defaultForm')
 
-            .bootstrapValidator({
 
-                message: 'This value is not valid',
 
-                feedbackIcons: {
 
-                    valid: 'glyphicon glyphicon-ok',
 
-                    invalid: 'glyphicon glyphicon-remove',
 
-                    validating: 'glyphicon glyphicon-refresh'
 
-                },
 
-                fields: {
 
-                    gender: {
 
-                        validators: {
 
-                            notEmpty: {
 
-                                message: 'The gender is required'
 
-                            }
 
-                        }
 
-                    },
 
-                    'browsers[]': {
 
-                        validators: {
 
-                            notEmpty: {
 
-                                message: 'Please specify at least one browser you use daily for development'
 
-                            }
 
-                        }
 
-                    },
 
-                    'editors[]': {
 
-                        validators: {
 
-                            notEmpty: {
 
-                                message: 'The editor names are required'
 
-                            }
 
-                        }
 
+$(document).ready(function() {
 
+    $('#defaultForm').bootstrapValidator({
 
+        feedbackIcons: {
 
+            valid: 'glyphicon glyphicon-ok',
 
+            invalid: 'glyphicon glyphicon-remove',
 
+            validating: 'glyphicon glyphicon-refresh'
 
+        },
 
+        container: 'tooltip',
 
+        fields: {
 
+            gender: {
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The gender is required'
 
                     }
 
                 }
 
-            })
 
-            .on('error.field.bv', function(e, data) {
 
-                console.log('error.field.bv -->', data);
 
-            })
 
-            .on('status.field.bv', function(e, data) {
 
-                console.log('status.field.bv -->', data);
 
-
 
-                var $form = $(e.target);
 
-                // I don't want to add has-success class to valid field container
 
-                data.element.parents('.form-group').removeClass('has-success');
 
-
 
-                // I want to enable the submit button all the time
 
-                $form.data('bootstrapValidator').disableSubmitButtons(false);
 
-            });
 
+            },
 
+            'browsers[]': {
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'Please specify at least one browser you use daily for development'
 
+                    }
 
+                }
 
+            },
 
+            'editors[]': {
 
+                validators: {
 
+                    notEmpty: {
 
+                        message: 'The editor names are required'
 
+                    }
 
+                }
 
+            }
 
+        }
 
     });
 
+});
 
 </script>
 
 </body>
 
 </html>

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

@@ -2,7 +2,7 @@
 
  * BootstrapValidator (http://bootstrapvalidator.com)
 
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
 
  *
 
- * @version     v0.5.3-dev, built on 2014-10-31 8:14:34 AM
 
+ * @version     v0.5.3-dev, built on 2014-10-31 2:46:30 PM
 
  * @author      https://twitter.com/nghuuphuoc
 
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
 
  * @license     MIT

+ 16 - 7
dist/js/bootstrapValidator.js
View File 

@@ -2,7 +2,7 @@
 
  * BootstrapValidator (http://bootstrapvalidator.com)
 
  * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
 
  *
 
- * @version     v0.5.3-dev, built on 2014-10-31 8:14:34 AM
 
+ * @version     v0.5.3-dev, built on 2014-10-31 2:46:30 PM
 
  * @author      https://twitter.com/nghuuphuoc
 
  * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
 
  * @license     MIT
 
@@ -368,6 +368,14 @@ if (typeof jQuery === 'undefined') {
 
                         $icon.addClass('bv-icon-input-group')
 
                              .insertAfter($parent.find('.input-group').eq(0));
 
                     }
 
+
 
+                    // Store the icon as a data of field element
 
+                    if (!updateAll) {
 
+                        $field.data('bv.icon', $icon);
 
+                    } else if (i === total - 1) {
 
+                        // All fields with the same name have the same icon
 
+                        fields.data('bv.icon', $icon);
 
+                    }
 
                     
                     if (container) {
 
                         $field
 
@@ -376,10 +384,10 @@ if (typeof jQuery === 'undefined') {
 
                             .on('focus.container.bv', function() {
 
                                 switch (container) {
 
                                     case 'tooltip':
 
-                                        $icon.tooltip('show');
 
+                                        $(this).data('bv.icon').tooltip('show');
 
                                         break;
 
                                     case 'popover':
 
-                                        $icon.popover('show');
 
+                                        $(this).data('bv.icon').popover('show');
 
                                         break;
 
                                     default:
 
                                         break;
 
@@ -390,10 +398,10 @@ if (typeof jQuery === 'undefined') {
 
                             .on('blur.container.bv', function() {
 
                                 switch (container) {
 
                                     case 'tooltip':
 
-                                        $icon.tooltip('hide');
 
+                                        $(this).data('bv.icon').tooltip('hide');
 
                                         break;
 
                                     case 'popover':
 
-                                        $icon.popover('hide');
 
+                                        $(this).data('bv.icon').popover('hide');
 
                                         break;
 
                                     default:
 
                                         break;
 
@@ -998,7 +1006,7 @@ if (typeof jQuery === 'undefined') {
 
                     $message     = $field.data('bv.messages'),
 
                     $allErrors   = $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]'),
 
                     $errors      = validatorName ? $allErrors.filter('[data-bv-validator="' + validatorName + '"]') : $allErrors,
 
-                    $icon        = $parent.find('.form-control-feedback[data-bv-icon-for="' + field + '"]'),
 
+                    $icon        = $field.data('bv.icon'),
 
                     container    = ('function' === typeof (this.options.fields[field].container || this.options.container)) ? (this.options.fields[field].container || this.options.container).call(this, $field, this) : (this.options.fields[field].container || this.options.container),
 
                     isValidField = null;
 
 
@@ -1617,7 +1625,7 @@ if (typeof jQuery === 'undefined') {
 
                         .removeAttr('data-bv-field');
 
 
                     // Remove feedback icons, tooltip/popover container
 
-                    $icon = $field.parents(group).find('i[data-bv-icon-for="' + field + '"]');
 
+                    $icon = $field.data('bv.icon');
 
                     if ($icon) {
 
                         var container = ('function' === typeof (this.options.fields[field].container || this.options.container)) ? (this.options.fields[field].container || this.options.container).call(this, $field, this) : (this.options.fields[field].container || this.options.container);
 
                         switch (container) {
 
@@ -1632,6 +1640,7 @@ if (typeof jQuery === 'undefined') {
 
                                 break;
 
                         }
 
                     }
 
+                    $field.removeData('bv.icon');
 
 
                     for (validator in this.options.fields[field].validators) {
 
                         if ($field.data('bv.dfs.' + validator)) {

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


+ 15 - 6
src/js/bootstrapValidator.js
View File 

@@ -368,6 +368,14 @@ if (typeof jQuery === 'undefined') {
 
                         $icon.addClass('bv-icon-input-group')
 
                              .insertAfter($parent.find('.input-group').eq(0));
 
                     }
 
+
 
+                    // Store the icon as a data of field element
 
+                    if (!updateAll) {
 
+                        $field.data('bv.icon', $icon);
 
+                    } else if (i === total - 1) {
 
+                        // All fields with the same name have the same icon
 
+                        fields.data('bv.icon', $icon);
 
+                    }
 
                     
                     if (container) {
 
                         $field
 
@@ -376,10 +384,10 @@ if (typeof jQuery === 'undefined') {
 
                             .on('focus.container.bv', function() {
 
                                 switch (container) {
 
                                     case 'tooltip':
 
-                                        $icon.tooltip('show');
 
+                                        $(this).data('bv.icon').tooltip('show');
 
                                         break;
 
                                     case 'popover':
 
-                                        $icon.popover('show');
 
+                                        $(this).data('bv.icon').popover('show');
 
                                         break;
 
                                     default:
 
                                         break;
 
@@ -390,10 +398,10 @@ if (typeof jQuery === 'undefined') {
 
                             .on('blur.container.bv', function() {
 
                                 switch (container) {
 
                                     case 'tooltip':
 
-                                        $icon.tooltip('hide');
 
+                                        $(this).data('bv.icon').tooltip('hide');
 
                                         break;
 
                                     case 'popover':
 
-                                        $icon.popover('hide');
 
+                                        $(this).data('bv.icon').popover('hide');
 
                                         break;
 
                                     default:
 
                                         break;
 
@@ -998,7 +1006,7 @@ if (typeof jQuery === 'undefined') {
 
                     $message     = $field.data('bv.messages'),
 
                     $allErrors   = $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]'),
 
                     $errors      = validatorName ? $allErrors.filter('[data-bv-validator="' + validatorName + '"]') : $allErrors,
 
-                    $icon        = $parent.find('.form-control-feedback[data-bv-icon-for="' + field + '"]'),
 
+                    $icon        = $field.data('bv.icon'),
 
                     container    = ('function' === typeof (this.options.fields[field].container || this.options.container)) ? (this.options.fields[field].container || this.options.container).call(this, $field, this) : (this.options.fields[field].container || this.options.container),
 
                     isValidField = null;
 
 
@@ -1617,7 +1625,7 @@ if (typeof jQuery === 'undefined') {
 
                         .removeAttr('data-bv-field');
 
 
                     // Remove feedback icons, tooltip/popover container
 
-                    $icon = $field.parents(group).find('i[data-bv-icon-for="' + field + '"]');
 
+                    $icon = $field.data('bv.icon');
 
                     if ($icon) {
 
                         var container = ('function' === typeof (this.options.fields[field].container || this.options.container)) ? (this.options.fields[field].container || this.options.container).call(this, $field, this) : (this.options.fields[field].container || this.options.container);
 
                         switch (container) {
 
@@ -1632,6 +1640,7 @@ if (typeof jQuery === 'undefined') {
 
                                 break;
 
                         }
 
                     }
 
+                    $field.removeData('bv.icon');
 
 
                     for (validator in this.options.fields[field].validators) {
 
                         if ($field.data('bv.dfs.' + validator)) {