diff --git a/Gemfile b/Gemfile
index 7f4f5e9..541a0f9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -2,4 +2,6 @@
 
 source 'https://rubygems.org'
 
+gem 'client_side_validations', github: 'MichalRemis/client_side_validations', branch: 'SupportDateTimeSelects'
+
 gemspec
diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
index 5cf2108..a8aebb3 100644
--- a/dist/simple-form.bootstrap4.esm.js
+++ b/dist/simple-form.bootstrap4.esm.js
@@ -7,16 +7,19 @@
 import $ from 'jquery';
 import ClientSideValidations from '@client-side-validations/client-side-validations';
 
-ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+var simpleFormFormBuilder = {
   add: function add(element, settings, message) {
-    this.wrapper(settings.wrapper).add.call(this, element, settings, message);
+    this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
   },
   remove: function remove(element, settings) {
-    this.wrapper(settings.wrapper).remove.call(this, element, settings);
+    this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings);
   },
   wrapper: function wrapper(name) {
     return this.wrappers[name] || this.wrappers["default"];
   },
+  wrapperName: function wrapperName(element, settings) {
+    return element.data('clientSideValidationsWrapper') || settings.wrapper;
+  },
   wrappers: {
     "default": {
       add: function add(element, settings, message) {
@@ -42,6 +45,40 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         element.removeClass('is-invalid');
         errorElement.remove();
       }
+    },
+    multi_select: {
+      add: function add(element, settings, message) {
+        var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
+        var parentElement = element.parent();
+        var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+
+        if (!errorElement.length) {
+          errorElement = $('<' + settings.error_tag + '>', {
+            "class": 'invalid-feedback d-block',
+            text: message
+          });
+          parentElement.after(errorElement);
+        }
+
+        wrapperElement.addClass(settings.wrapper_error_class);
+        element.addClass('is-invalid');
+        errorElement.text(message);
+      },
+      remove: function remove(element, settings) {
+        var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
+        var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+        var invalidSiblingExists = element.siblings('.is-invalid').length;
+
+        if (!invalidSiblingExists) {
+          wrapperElement.removeClass(settings.wrapper_error_class);
+          errorElement.remove();
+        }
+
+        element.removeClass('is-invalid');
+      }
     }
   }
 };
+simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select;
+simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select;
+ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder;
diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js
index e5bd428..c84cb45 100644
--- a/dist/simple-form.bootstrap4.js
+++ b/dist/simple-form.bootstrap4.js
@@ -13,16 +13,19 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+  var simpleFormFormBuilder = {
     add: function add(element, settings, message) {
-      this.wrapper(settings.wrapper).add.call(this, element, settings, message);
+      this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
     },
     remove: function remove(element, settings) {
-      this.wrapper(settings.wrapper).remove.call(this, element, settings);
+      this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings);
     },
     wrapper: function wrapper(name) {
       return this.wrappers[name] || this.wrappers["default"];
     },
+    wrapperName: function wrapperName(element, settings) {
+      return element.data('clientSideValidationsWrapper') || settings.wrapper;
+    },
     wrappers: {
       "default": {
         add: function add(element, settings, message) {
@@ -48,8 +51,42 @@
           element.removeClass('is-invalid');
           errorElement.remove();
         }
+      },
+      multi_select: {
+        add: function add(element, settings, message) {
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
+          var parentElement = element.parent();
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+
+          if (!errorElement.length) {
+            errorElement = $('<' + settings.error_tag + '>', {
+              "class": 'invalid-feedback d-block',
+              text: message
+            });
+            parentElement.after(errorElement);
+          }
+
+          wrapperElement.addClass(settings.wrapper_error_class);
+          element.addClass('is-invalid');
+          errorElement.text(message);
+        },
+        remove: function remove(element, settings) {
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+          var invalidSiblingExists = element.siblings('.is-invalid').length;
+
+          if (!invalidSiblingExists) {
+            wrapperElement.removeClass(settings.wrapper_error_class);
+            errorElement.remove();
+          }
+
+          element.removeClass('is-invalid');
+        }
       }
     }
   };
+  simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select;
+  simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select;
+  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder;
 
 })));
diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js
index 22b06e5..74ca450 100644
--- a/dist/simple-form.esm.js
+++ b/dist/simple-form.esm.js
@@ -9,14 +9,17 @@ import ClientSideValidations from '@client-side-validations/client-side-validati
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function add(element, settings, message) {
-    this.wrapper(settings.wrapper).add.call(this, element, settings, message);
+    this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
   },
   remove: function remove(element, settings) {
-    this.wrapper(settings.wrapper).remove.call(this, element, settings);
+    this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings);
   },
   wrapper: function wrapper(name) {
     return this.wrappers[name] || this.wrappers["default"];
   },
+  wrapperName: function wrapperName(element, settings) {
+    return element.data('clientSideValidationsWrapper') || settings.wrapper;
+  },
   wrappers: {
     "default": {
       add: function add(element, settings, message) {
diff --git a/dist/simple-form.js b/dist/simple-form.js
index 0a24645..62decb9 100644
--- a/dist/simple-form.js
+++ b/dist/simple-form.js
@@ -15,14 +15,17 @@
 
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
-      this.wrapper(settings.wrapper).add.call(this, element, settings, message);
+      this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
     },
     remove: function remove(element, settings) {
-      this.wrapper(settings.wrapper).remove.call(this, element, settings);
+      this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings);
     },
     wrapper: function wrapper(name) {
       return this.wrappers[name] || this.wrappers["default"];
     },
+    wrapperName: function wrapperName(element, settings) {
+      return element.data('clientSideValidationsWrapper') || settings.wrapper;
+    },
     wrappers: {
       "default": {
         add: function add(element, settings, message) {
diff --git a/lib/client_side_validations/simple_form/form_builder.rb b/lib/client_side_validations/simple_form/form_builder.rb
index 807622a..e23bce3 100644
--- a/lib/client_side_validations/simple_form/form_builder.rb
+++ b/lib/client_side_validations/simple_form/form_builder.rb
@@ -22,6 +22,8 @@ def input(attribute_name, options = {}, &block)
           options.delete(:validate)
         end
 
+        add_field_specific_wrapper_name_to_field_options(attribute_name, options, &block)
+
         super(attribute_name, options, &block)
       end
 
@@ -34,6 +36,14 @@ def wrapper_error_component
           wrapper.find(:full_error)
         end
       end
+
+      def add_field_specific_wrapper_name_to_field_options(attribute_name, options, &block)
+        wrapper_name = options[:wrapper] || find_wrapper_mapping(find_input(attribute_name, options, &block).input_type)
+        return if wrapper_name.nil?
+
+        options[:input_html] ||= {}
+        options[:input_html][:'data-client-side-validations-wrapper'] = wrapper_name
+      end
     end
   end
 end
diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js
index dbb7e3f..c7919ff 100644
--- a/src/main.bootstrap4.js
+++ b/src/main.bootstrap4.js
@@ -1,22 +1,25 @@
 import $ from 'jquery'
 import ClientSideValidations from '@client-side-validations/client-side-validations'
 
-ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+const simpleFormFormBuilder = {
   add: function (element, settings, message) {
-    this.wrapper(settings.wrapper).add.call(this, element, settings, message)
+    this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message)
   },
   remove: function (element, settings) {
-    this.wrapper(settings.wrapper).remove.call(this, element, settings)
+    this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings)
   },
   wrapper: function (name) {
     return this.wrappers[name] || this.wrappers.default
   },
+  wrapperName: function (element, settings) {
+    return element.data('clientSideValidationsWrapper') || settings.wrapper
+  },
 
   wrappers: {
     default: {
       add (element, settings, message) {
         const wrapperElement = element.parent()
-        let errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
+        var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
 
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback', text: message })
@@ -36,6 +39,40 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         element.removeClass('is-invalid')
         errorElement.remove()
       }
+    },
+    multi_select: {
+      add (element, settings, message) {
+        const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
+        const parentElement = element.parent()
+        var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
+
+        if (!errorElement.length) {
+          errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message })
+          parentElement.after(errorElement)
+        }
+
+        wrapperElement.addClass(settings.wrapper_error_class)
+        element.addClass('is-invalid')
+        errorElement.text(message)
+      },
+      remove (element, settings) {
+        const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
+        const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
+
+        const invalidSiblingExists = element.siblings('.is-invalid').length
+
+        if (!invalidSiblingExists) {
+          wrapperElement.removeClass(settings.wrapper_error_class)
+          errorElement.remove()
+        }
+
+        element.removeClass('is-invalid')
+      }
     }
   }
 }
+
+simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select
+simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select
+
+ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder
diff --git a/src/main.js b/src/main.js
index 0b27184..b3e9bf7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,20 +3,23 @@ import ClientSideValidations from '@client-side-validations/client-side-validati
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function (element, settings, message) {
-    this.wrapper(settings.wrapper).add.call(this, element, settings, message)
+    this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message)
   },
   remove: function (element, settings) {
-    this.wrapper(settings.wrapper).remove.call(this, element, settings)
+    this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings)
   },
   wrapper: function (name) {
     return this.wrappers[name] || this.wrappers.default
   },
+  wrapperName: function (element, settings) {
+    return element.data('clientSideValidationsWrapper') || settings.wrapper
+  },
 
   wrappers: {
     default: {
       add (element, settings, message) {
         const wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
-        let errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'))
+        var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'))
 
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', { class: settings.error_class, text: message })
diff --git a/test/javascript/public/test/form_builders/validateSimpleForm.js b/test/javascript/public/test/form_builders/validateSimpleForm.js
index a7d1c1b..b463342 100644
--- a/test/javascript/public/test/form_builders/validateSimpleForm.js
+++ b/test/javascript/public/test/form_builders/validateSimpleForm.js
@@ -12,7 +12,7 @@ QUnit.module('Validate SimpleForm', {
     dataCsv = {
       html_settings: {
         type: 'SimpleForm::FormBuilder',
-        error_class: 'error small',
+        error_class: 'error small', // 'small' class is present to test 399f389
         error_tag: 'span',
         wrapper_error_class: 'field_with_errors',
         wrapper_tag: 'div',
@@ -20,7 +20,8 @@ QUnit.module('Validate SimpleForm', {
         wrapper: 'default'
       },
       validators: {
-        'user[name]': { presence: [{ message: 'must be present' }], format: [{ message: 'is invalid', 'with': { options: 'g', source: '\\d+' } }] }
+        'user[name]': { presence: [{ message: 'must be present' }], format: [{ message: 'is invalid', 'with': { options: 'g', source: '\\d+' } }] },
+        'user[date_of_birth]': { presence: [{ message: 'must be present' }] }
       }
     }
 
@@ -40,6 +41,12 @@ QUnit.module('Validate SimpleForm', {
         type: 'text'
       }))
       .append($('<label for="user_name">Name</label>'))
+      .append($('<input />', {
+        name: 'user[date_of_birth]',
+        id: 'date_of_birth',
+        type: 'text',
+        'data-client-side-validations-wrapper': 'custom_date_wrapper'
+      }))
     $('form#new_user').validate()
   }
 })
@@ -82,3 +89,22 @@ QUnit.test('Validate pre-existing error blocks are re-used', function (assert) {
   assert.ok(input.parent().find('span.error:contains("is invalid")').length === 1)
   assert.ok(form.find('span.error').length === 1)
 })
+
+QUnit.test('Validate correct JS Builder\'s wrapper is called for custom_wrapper', function (assert) {
+  const oldWrappers = $.extend({}, ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers)
+
+  // It would be probably better to use some stub library but I want to keep it simple
+  let customWrapperCalled = false;
+
+  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers['custom_date_wrapper'] = {
+    add: function(element, settings, message) { customWrapperCalled=true; },
+    remove: function(element, settings) {}
+  }
+
+  var form = $('form#new_user');
+  var input = form.find('input#date_of_birth')
+  input.trigger('focusout')
+
+  assert.ok(customWrapperCalled);
+  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers = oldWrappers
+})
diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
index 753e494..05adb4e 100644
--- a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
+++ b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
@@ -20,7 +20,9 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
       },
       validators: {
         'user[name]': { presence: [{ message: 'must be present' }], format: [{ message: 'is invalid', 'with': { options: 'g', source: '\\d+' } }] },
-        'user[username]': { presence: [{ message: 'must be present' }] }
+        'user[username]': { presence: [{ message: 'must be present' }] },
+        'user[date_of_birth]': { presence: [{ message: 'must be present' }] },
+        'user[time_of_birth]': { presence: [{ message: 'must be present' }] }
       }
     }
 
@@ -49,8 +51,81 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                       .append(
                         $('<span>', { 'class': 'input-group-text', text: '@' })))
                   .append(
-                    $('<input />', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' })))))
-
+                    $('<input />', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' }))))
+          .append($('<div>', {
+            class:'form-group date required user_date_of_birth'
+          })
+            .append($('<label class="form-control-label date required" for="user_date_of_birth_1i">Date of birth <abbr title="required">*</abbr></label>'))
+            .append($('<div>', {
+              class: 'd-flex flex-row justify-content-between align-items-center'
+            })
+              .append($('<select>', {
+                id: 'user_date_of_birth_1i',
+                name: 'user[date_of_birth(1i)]',
+                class: 'form-control mx-1 date required',
+                'data-client-side-validations-wrapper': 'vertical_multi_select'
+              })
+                .append($('<option value=""></option>'))
+                .append($('<option value="2015">2015</option>'))
+                .append($('<option value="2025">2025</option>')))
+              .append($('<select>', {
+                id: 'user_date_of_birth_2i',
+                name: 'user[date_of_birth(2i)]',
+                class: 'form-control mx-1 date required',
+                'data-client-side-validations-wrapper': 'vertical_multi_select'
+              })
+                .append($('<option value=""></option>'))
+                .append($('<option value="1">January</option>'))
+                .append($('<option value="2">February</option>')))
+              .append($('<select>', {
+                id: 'user_date_of_birth_3i',
+                name: 'user[date_of_birth(3i)]',
+                class: 'form-control mx-1 date required',
+                'data-client-side-validations-wrapper': 'vertical_multi_select'
+              })
+                .append($('<option value=""></option>'))
+                .append($('<option value="1">1</option>'))
+                .append($('<option value="2">2</option>'))
+                .append($('<option value="3">3</option>')))
+            )
+            .append('<small class="form-text text-muted">hint text</small>')
+          )
+          .append($('<div>', {
+            class:'form-group time required user_time_of_birth form-group-invalid'
+          })
+            .append($('<label class="form-control-label time required" for="user_time_of_birth_4i">Time of birth <abbr title="required">*</abbr></label>'))
+            .append($('<div>', {
+              class: 'd-flex flex-row justify-content-between align-items-center'
+            })
+              .append('<input type="hidden" id="user_time_of_birth_1i" name="user[time_of_birth(1i)]" value="1">')
+              .append('<input type="hidden" id="user_time_of_birth_2i" name="user[time_of_birth(2i)]" value="1">')
+              .append('<input type="hidden" id="user_time_of_birth_3i" name="user[time_of_birth(3i)]" value="1">')
+              .append($('<select>', {
+                id: 'user_time_of_birth_4i',
+                name: 'user[time_of_birth(4i)]',
+                class: 'form-control mx-1 is-invalid time required',
+                'data-client-side-validations-wrapper': 'vertical_multi_select'
+              })
+                .append($('<option value=""></option>'))
+                .append($('<option value="00">00</option>'))
+                .append($('<option value="23">23</option>'))
+              )
+              .append(':')
+              .append($('<select>', {
+                id: 'user_time_of_birth_5i',
+                name: 'user[time_of_birth(5i)]',
+                class: 'form-control mx-1 is-invalid time required',
+                'data-client-side-validations-wrapper': 'vertical_multi_select'
+              })
+                .append($('<option value=""></option>'))
+                .append($('<option value="00">00</option>'))
+                .append($('<option value="55">55</option>'))
+              )
+            )
+            .append('<div class="invalid-feedback d-block">Time of birth must be present.</div>')
+            .append('<small class="form-text text-muted">Hint: At what time you were born?</small>')
+        )
+      )
     $('form#new_user').validate()
   }
 })
@@ -99,7 +174,7 @@ for (var i = 0; i < wrappers.length; i++) {
     assert.ok(input.parent().hasClass('form-group-invalid'))
     assert.ok(label.parent().hasClass('form-group-invalid'))
     assert.ok(input.parent().find('div.invalid-feedback:contains("is invalid")').length === 1)
-    assert.ok(form.find('div.invalid-feedback').length === 1)
+    assert.ok(input.closest('.form-group').find('div.invalid-feedback').length === 1)
   })
 
   QUnit.test(wrapper + ' - Validate input-group', function (assert) {
@@ -116,4 +191,55 @@ for (var i = 0; i < wrappers.length; i++) {
     input.trigger('focusout')
     assert.ok(input.closest('.input-group').find('div.invalid-feedback').length === 0)
   })
+
+  QUnit.test(wrapper + ' - Validate date input', function (assert) {
+    const form = $('form#new_user');
+    const select_year = form.find('select#user_date_of_birth_1i')
+    const select_month = form.find('select#user_date_of_birth_2i')
+    const select_day = form.find('select#user_date_of_birth_3i')
+
+    form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper
+
+    select_year.trigger('focusout')
+    select_day.trigger('focusout')
+
+    assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1)
+
+    select_year.val(2025).trigger('change').trigger('focusout')
+
+    assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1)
+
+    select_month.val(1).trigger('change').trigger('focusout')
+    select_day.val(1).trigger('change').trigger('focusout')
+
+    assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0)
+  })
+
+  QUnit.test(wrapper + ' - Validate time input reusing server message', function (assert) {
+    const form = $('form#new_user');
+    const select_hour = form.find('select#user_time_of_birth_4i')
+    const select_minute = form.find('select#user_time_of_birth_5i')
+
+    form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper
+
+    assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1)
+
+    select_hour.val(23).trigger('change').trigger('focusout')
+
+    assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1)
+
+    select_minute.val(55).trigger('change').trigger('focusout')
+
+    assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid'))
+    assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0)
+  })
+
 }
diff --git a/test/simple_form/cases/test_form_helpers.rb b/test/simple_form/cases/test_form_helpers.rb
index b543c77..5aea45d 100644
--- a/test/simple_form/cases/test_form_helpers.rb
+++ b/test/simple_form/cases/test_form_helpers.rb
@@ -102,6 +102,30 @@ def test_input_override
 
         assert_dom_equal expected, output_buffer
       end
+
+      def test_input_override_with_custom_wrapper_name
+        simple_form_for(@post, validate: true, wrapper: :default) do |f|
+          concat f.input(:cost, validate: false, wrapper: :custom_date_wrapper)
+        end
+
+        csv_data = {
+          html_settings: {
+            type:                'SimpleForm::FormBuilder',
+            error_class:         'error',
+            error_tag:           'span',
+            wrapper_error_class: 'field_with_errors',
+            wrapper_tag:         'div',
+            wrapper_class:       'input',
+            wrapper:             'default'
+          },
+          number_format: { separator: '.', delimiter: ',' },
+          validators:    {}
+        }
+
+        expected = %(<form accept-charset="UTF-8" action="/posts" class="simple_form new_post" data-client-side-validations="#{CGI.escapeHTML(csv_data.to_json)}" id="new_post" method="post" novalidate="novalidate"><input name="utf8" type="hidden" value="&#x2713;" /><div class="string required post_cost"><input class="form-control string required" data-client-side-validations-wrapper="custom_date_wrapper" type="text" name="post[cost]" id="post_cost" /></div></form>)
+
+        assert_dom_equal expected, output_buffer
+      end
     end
   end
 end
diff --git a/test/test_loader.rb b/test/test_loader.rb
index fb6ba0e..f46501a 100644
--- a/test/test_loader.rb
+++ b/test/test_loader.rb
@@ -5,7 +5,10 @@
 require 'base_helper'
 require 'client_side_validations/simple_form'
 
-SimpleForm.setup do
+SimpleForm.setup do |config|
+  config.wrappers :custom_date_wrapper, tag: 'div' do |b|
+    b.use :input, class: 'form-control'
+  end
 end
 
 TestApp::Application.initialize!
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
index e5bd428..c84cb45 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
@@ -13,16 +13,19 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+  var simpleFormFormBuilder = {
     add: function add(element, settings, message) {
-      this.wrapper(settings.wrapper).add.call(this, element, settings, message);
+      this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
     },
     remove: function remove(element, settings) {
-      this.wrapper(settings.wrapper).remove.call(this, element, settings);
+      this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings);
     },
     wrapper: function wrapper(name) {
       return this.wrappers[name] || this.wrappers["default"];
     },
+    wrapperName: function wrapperName(element, settings) {
+      return element.data('clientSideValidationsWrapper') || settings.wrapper;
+    },
     wrappers: {
       "default": {
         add: function add(element, settings, message) {
@@ -48,8 +51,42 @@
           element.removeClass('is-invalid');
           errorElement.remove();
         }
+      },
+      multi_select: {
+        add: function add(element, settings, message) {
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
+          var parentElement = element.parent();
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+
+          if (!errorElement.length) {
+            errorElement = $('<' + settings.error_tag + '>', {
+              "class": 'invalid-feedback d-block',
+              text: message
+            });
+            parentElement.after(errorElement);
+          }
+
+          wrapperElement.addClass(settings.wrapper_error_class);
+          element.addClass('is-invalid');
+          errorElement.text(message);
+        },
+        remove: function remove(element, settings) {
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+          var invalidSiblingExists = element.siblings('.is-invalid').length;
+
+          if (!invalidSiblingExists) {
+            wrapperElement.removeClass(settings.wrapper_error_class);
+            errorElement.remove();
+          }
+
+          element.removeClass('is-invalid');
+        }
       }
     }
   };
+  simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select;
+  simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select;
+  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder;
 
 })));
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js
index 0a24645..62decb9 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.js
@@ -15,14 +15,17 @@
 
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
-      this.wrapper(settings.wrapper).add.call(this, element, settings, message);
+      this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
     },
     remove: function remove(element, settings) {
-      this.wrapper(settings.wrapper).remove.call(this, element, settings);
+      this.wrapper(this.wrapperName(element, settings)).remove.call(this, element, settings);
     },
     wrapper: function wrapper(name) {
       return this.wrappers[name] || this.wrappers["default"];
     },
+    wrapperName: function wrapperName(element, settings) {
+      return element.data('clientSideValidationsWrapper') || settings.wrapper;
+    },
     wrappers: {
       "default": {
         add: function add(element, settings, message) {