#125, #130: Combine addField() and addFieldElement() methods

demo/dynamic.html

@@ -100,7 +100,7 @@
                 $templateEle = $('#' + template + 'Template'),
                 $row         = $templateEle.clone().removeAttr('id').insertBefore($templateEle).removeClass('hide'),
                 $el          = $row.find('input').eq(0).attr('name', template + '[]');
-            $('#defaultForm').bootstrapValidator('addFieldElement', $el);
+            $('#defaultForm').bootstrapValidator('addField', $el);
 
             // Set random value for checkbox and textbox
             if ('checkbox' == $el.attr('type') || 'radio' == $el.attr('type')) {
@@ -158,10 +158,10 @@
                 //console.log(data.field, data.element, '-->success');
             })
             .on('added.field.bv', function(e, data) {
-                console.log('Added element:', data.field, data.element);
+                //console.log('Added element:', data.field, data.element);
             })
             .on('removed.field.bv', function(e, data) {
-                console.log('Removed element:', data.field, data.element);
+                //console.log('Removed element:', data.field, data.element);
             });
     });
 </script>

demo/dynamic3.html

@@ -159,7 +159,7 @@
                     $('#receiverInfo').hide();
 
                     $('#shippingForm')
-                        // Use removeField() method
+                        // Remove field
                         .bootstrapValidator('removeField', 'receiverName')
                         .bootstrapValidator('removeField', 'receiverAddress')
                         .bootstrapValidator('removeField', $receiverPhone)
@@ -168,7 +168,7 @@
                     $('#receiverInfo').show();
 
                     $('#shippingForm')
-                        // Use addField() method
+                        // Add field
                         .bootstrapValidator('addField', 'receiverName', {
                             validators: {
                                 notEmpty: {
@@ -177,8 +177,7 @@
                             }
                         })
                         .bootstrapValidator('addField', 'receiverAddress')      // The options are automatically parsed from HTML attributes
-                        // Use addFieldElement() method
-                        .bootstrapValidator('addFieldElement', $receiverPhone, {
+                        .bootstrapValidator('addField', $receiverPhone, {
                             message: 'The phone number is not valid',
                             validators: {
                                 notEmpty: {
@@ -189,7 +188,7 @@
                                 }
                             }
                         })
-                        .bootstrapValidator('addFieldElement', $receiverCity);  // The options are automatically parsed from HTML attributes
+                        .bootstrapValidator('addField', $receiverCity);  // The options are automatically parsed from HTML attributes
                 }
             });
     });

dist/js/bootstrapValidator.js

@@ -1058,22 +1058,53 @@
         /**
          * Add a new field
          *
-         * @param {String} field The field name
+         * @param {String|jQuery} field The field name or field element
          * @param {Object} [options] The validator rules
          * @returns {BootstrapValidator}
          */
         addField: function(field, options) {
-            this.options.fields[field] = options;
-            var fields = this.getFieldElements(field),
-                type   = fields.attr('type'),
-                n      = (('radio' == type) || ('checkbox' == type)) ? 1 : fields.length;
+            var fields = $([]);
+            switch (typeof field) {
+                case 'object':
+                    fields = field;
+                    field  = field.attr('data-bv-field') || field.attr('name');
+                    break;
+                case 'string':
+                    fields = this.getFieldElements(field);
+                    break;
+                default:
+                    break;
+            }
 
             fields.attr('data-bv-field', field);
-            for (var i = 0; i < n; i++) {
-                this.addFieldElement($(fields[i]), options);
+
+            var type  = fields.attr('type'),
+                total = ('radio' == type || 'checkbox' == type) ? 1 : fields.length;
+
+            for (var i = 0; i < total; i++) {
+                var $field = $(fields[i]);
+
+                // Try to parse the options from HTML attributes
+                var opts = this._parseOptions($field);
+                opts = (opts == null) ? options : $.extend(true, options, opts);
+
+                this.options.fields[field] = $.extend(true, this.options.fields[field], opts);
+
+                // Update the cache
+                this._cacheFields[field] = this._cacheFields[field] ? this._cacheFields[field].add($field) : $field;
+
+                // Init the element
+                ('checkbox' == type || 'radio' == type) ? this._initField(field) : this._initFieldElement($field);
             }
 
             this.disableSubmitButtons(false);
+            // Trigger an event
+            this.$form.trigger($.Event('added.field.bv'), {
+                field: field,
+                element: fields,
+                options: this.options.fields[field]
+            });
+
             return this;
         },
 
@@ -1122,47 +1153,13 @@
                 this._initField(field);
             }
 
+            this.disableSubmitButtons(false);
             // Trigger an event
             this.$form.trigger($.Event('removed.field.bv'), {
                 field: field,
                 element: fields
             });
 
-            this.disableSubmitButtons(false);
-            return this;
-        },
-
-        /**
-         * Add new field element
-         *
-         * @param {jQuery} $field The field element
-         * @param {Object} [options] The field options
-         * @returns {BootstrapValidator}
-         */
-        addFieldElement: function($field, options) {
-            var field = $field.attr('data-bv-field') || $field.attr('name'),
-                type  = $field.attr('type');
-            $field.attr('data-bv-field', field);
-
-            // Try to parse the options from HTML attributes
-            var opts = this._parseOptions($field);
-            opts = (opts == null) ? options : $.extend(true, options, opts);
-
-            this.options.fields[field] = $.extend(true, this.options.fields[field], opts);
-
-            // Init the element
-            delete this._cacheFields[field];
-            ('checkbox' == type || 'radio' == type) ? this._initField(field) : this._initFieldElement($field);
-
-            this.disableSubmitButtons(false);
-
-            // Trigger an event
-            this.$form.trigger($.Event('added.field.bv'), {
-                field: field,
-                element: $field,
-                options: this.options.fields[field]
-            });
-
             return this;
         },
 

src/js/bootstrapValidator.js

@@ -1057,22 +1057,53 @@
         /**
          * Add a new field
          *
-         * @param {String} field The field name
+         * @param {String|jQuery} field The field name or field element
          * @param {Object} [options] The validator rules
          * @returns {BootstrapValidator}
          */
         addField: function(field, options) {
-            this.options.fields[field] = options;
-            var fields = this.getFieldElements(field),
-                type   = fields.attr('type'),
-                n      = (('radio' == type) || ('checkbox' == type)) ? 1 : fields.length;
+            var fields = $([]);
+            switch (typeof field) {
+                case 'object':
+                    fields = field;
+                    field  = field.attr('data-bv-field') || field.attr('name');
+                    break;
+                case 'string':
+                    fields = this.getFieldElements(field);
+                    break;
+                default:
+                    break;
+            }
 
             fields.attr('data-bv-field', field);
-            for (var i = 0; i < n; i++) {
-                this.addFieldElement($(fields[i]), options);
+
+            var type  = fields.attr('type'),
+                total = ('radio' == type || 'checkbox' == type) ? 1 : fields.length;
+
+            for (var i = 0; i < total; i++) {
+                var $field = $(fields[i]);
+
+                // Try to parse the options from HTML attributes
+                var opts = this._parseOptions($field);
+                opts = (opts == null) ? options : $.extend(true, options, opts);
+
+                this.options.fields[field] = $.extend(true, this.options.fields[field], opts);
+
+                // Update the cache
+                this._cacheFields[field] = this._cacheFields[field] ? this._cacheFields[field].add($field) : $field;
+
+                // Init the element
+                ('checkbox' == type || 'radio' == type) ? this._initField(field) : this._initFieldElement($field);
             }
 
             this.disableSubmitButtons(false);
+            // Trigger an event
+            this.$form.trigger($.Event('added.field.bv'), {
+                field: field,
+                element: fields,
+                options: this.options.fields[field]
+            });
+
             return this;
         },
 
@@ -1121,47 +1152,13 @@
                 this._initField(field);
             }
 
+            this.disableSubmitButtons(false);
             // Trigger an event
             this.$form.trigger($.Event('removed.field.bv'), {
                 field: field,
                 element: fields
             });
 
-            this.disableSubmitButtons(false);
-            return this;
-        },
-
-        /**
-         * Add new field element
-         *
-         * @param {jQuery} $field The field element
-         * @param {Object} [options] The field options
-         * @returns {BootstrapValidator}
-         */
-        addFieldElement: function($field, options) {
-            var field = $field.attr('data-bv-field') || $field.attr('name'),
-                type  = $field.attr('type');
-            $field.attr('data-bv-field', field);
-
-            // Try to parse the options from HTML attributes
-            var opts = this._parseOptions($field);
-            opts = (opts == null) ? options : $.extend(true, options, opts);
-
-            this.options.fields[field] = $.extend(true, this.options.fields[field], opts);
-
-            // Init the element
-            delete this._cacheFields[field];
-            ('checkbox' == type || 'radio' == type) ? this._initField(field) : this._initFieldElement($field);
-
-            this.disableSubmitButtons(false);
-
-            // Trigger an event
-            this.$form.trigger($.Event('added.field.bv'), {
-                field: field,
-                element: $field,
-                options: this.options.fields[field]
-            });
-
             return this;
         },