浏览代码

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

Phuoc Nguyen 11 年之前
父节点
当前提交
62fb9a3589

+ 1 - 0
CHANGELOG.md

@@ -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

@@ -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

@@ -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

@@ -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)) {

文件差异内容过多而无法显示
+ 2 - 2
dist/js/bootstrapValidator.min.js


+ 15 - 6
src/js/bootstrapValidator.js

@@ -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)) {