From f59d88a812a8255f417bcd620862166c6941d291 Mon Sep 17 00:00:00 2001
From: Michal Remis <michal.remis@gmail.com>
Date: Tue, 14 Apr 2020 16:35:34 +0200
Subject: [PATCH 1/6] Implemented field's specific wrapper_names to be passed
 to and used by CSV Javascript form builder for adding/removing of error
 messages. Before CSV used only form-wide wrapper but field may use custom
 wrapper specified:

    - by field's `wrapper` attribute
    - by field's type and `wrapper_mappings` attribute
    - by field's type and SimpleForm config `wrapper_mappings`
---
 dist/simple-form.bootstrap4.esm.js            |  7 +++--
 dist/simple-form.bootstrap4.js                |  7 +++--
 dist/simple-form.esm.js                       |  7 +++--
 dist/simple-form.js                           |  7 +++--
 .../simple_form/form_builder.rb               | 10 +++++++
 src/main.bootstrap4.js                        |  9 ++++--
 src/main.js                                   |  9 ++++--
 .../test/form_builders/validateSimpleForm.js  | 28 ++++++++++++++++++-
 test/simple_form/cases/test_form_helpers.rb   | 24 ++++++++++++++++
 test/test_loader.rb                           |  5 +++-
 ...ails.validations.simple_form.bootstrap4.js |  7 +++--
 .../rails.validations.simple_form.js          |  7 +++--
 12 files changed, 107 insertions(+), 20 deletions(-)

diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
index 5cf2108..2f2ca70 100644
--- a/dist/simple-form.bootstrap4.esm.js
+++ b/dist/simple-form.bootstrap4.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.bootstrap4.js b/dist/simple-form.bootstrap4.js
index e5bd428..d934fa1 100644
--- a/dist/simple-form.bootstrap4.js
+++ b/dist/simple-form.bootstrap4.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/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..6044c0e 100644
--- a/src/main.bootstrap4.js
+++ b/src/main.bootstrap4.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 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 })
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..3643175 100644
--- a/test/javascript/public/test/form_builders/validateSimpleForm.js
+++ b/test/javascript/public/test/form_builders/validateSimpleForm.js
@@ -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/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..d934fa1 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.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/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) {

From f953f792f3946c80352e63e20b7e5637bb0a70a1 Mon Sep 17 00:00:00 2001
From: Michal Remis <michal.remis@gmail.com>
Date: Tue, 28 Apr 2020 21:30:16 +0200
Subject: [PATCH 2/6] Checkboxes association presence validation

---
 Gemfile                                       |   3 +
 client_side_validations-simple_form.gemspec   |   1 +
 dist/simple-form.bootstrap4.esm.js            |  49 +++++
 dist/simple-form.bootstrap4.js                |  49 +++++
 dist/simple-form.esm.js                       |  26 ++-
 dist/simple-form.js                           |  26 ++-
 .../simple_form/form_builder.rb               |  10 +
 src/main.bootstrap4.js                        |  28 +++
 src/main.js                                   |   8 +-
 src/radio_checkbox_validators.js              |  21 ++
 test/action_view/test_helper.rb               |   1 +
 .../test/form_builders/validateSimpleForm.js  | 106 ++++++++--
 .../validateSimpleFormBootstrap4.js           | 175 +++++++++++++++-
 test/simple_form/cases/helper.rb              |   1 +
 test/simple_form/cases/test_form_helpers.rb   | 186 ++++++++++++++----
 test/simple_form/models.rb                    |   6 +
 test/simple_form/models/application_record.rb |  13 ++
 test/simple_form/models/department.rb         |   8 +
 test/simple_form/models/role.rb               |   8 +
 test/simple_form/models/user.rb               |  11 ++
 ...ails.validations.simple_form.bootstrap4.js |  49 +++++
 .../rails.validations.simple_form.js          |  26 ++-
 22 files changed, 742 insertions(+), 69 deletions(-)
 create mode 100644 src/radio_checkbox_validators.js
 create mode 100644 test/simple_form/models.rb
 create mode 100644 test/simple_form/models/application_record.rb
 create mode 100644 test/simple_form/models/department.rb
 create mode 100644 test/simple_form/models/role.rb
 create mode 100644 test/simple_form/models/user.rb

diff --git a/Gemfile b/Gemfile
index 7f4f5e9..6773bbb 100644
--- a/Gemfile
+++ b/Gemfile
@@ -3,3 +3,6 @@
 source 'https://rubygems.org'
 
 gemspec
+
+#gem 'client_side_validations', github: 'DavyJonesLocker/client_side_validations'
+gem 'client_side_validations', path: '../client_side_validations'
diff --git a/client_side_validations-simple_form.gemspec b/client_side_validations-simple_form.gemspec
index 20edf37..221168e 100644
--- a/client_side_validations-simple_form.gemspec
+++ b/client_side_validations-simple_form.gemspec
@@ -39,6 +39,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'rubocop-performance', '~> 1.5'
   spec.add_development_dependency 'rubocop-rails', '~> 2.5'
   spec.add_development_dependency 'simplecov', '~> 0.18.5'
+  spec.add_development_dependency 'sqlite3', '~> 1.4'
 
   # For QUnit testing
   spec.add_development_dependency 'shotgun', '~> 0.9.2'
diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
index 2f2ca70..f661b2f 100644
--- a/dist/simple-form.bootstrap4.esm.js
+++ b/dist/simple-form.bootstrap4.esm.js
@@ -7,6 +7,25 @@
 import $ from 'jquery';
 import ClientSideValidations from '@client-side-validations/client-side-validations';
 
+var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+function checkedCheckboxesCount(element, formSettings) {
+  var wrapperClass = formSettings.html_settings.wrapper_class;
+  return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+}
+
+ClientSideValidations.validators.local.presence = function (element, options) {
+  if (element.attr('type') === 'checkbox') {
+    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+
+    if (checkedCheckboxesCount(element, formSettings) === 0) {
+      return options.message;
+    }
+  } else {
+    return originalPresenceValidator(element, options);
+  }
+};
+
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function add(element, settings, message) {
     this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -45,6 +64,36 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         element.removeClass('is-invalid');
         errorElement.remove();
       }
+    },
+
+    get horizontal_collection() {
+      return this.vertical_collection;
+    },
+
+    vertical_collection: {
+      add: function add(element, settings, message) {
+        var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
+        var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+
+        if (!errorElement.length) {
+          errorElement = $('<' + settings.error_tag + '>', {
+            "class": 'invalid-feedback d-block',
+            text: message
+          });
+          element.closest('.form-check').siblings('.form-check:last').after(errorElement);
+        }
+
+        wrapperElement.addClass(settings.wrapper_error_class);
+        wrapperElement.find('input:visible').addClass('is-invalid');
+        errorElement.text(message);
+      },
+      remove: function remove(element, settings) {
+        var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
+        var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+        wrapperElement.removeClass(settings.wrapper_error_class);
+        errorElement.remove();
+        wrapperElement.find('input:visible').removeClass('is-invalid');
+      }
     }
   }
 };
diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js
index d934fa1..df732ea 100644
--- a/dist/simple-form.bootstrap4.js
+++ b/dist/simple-form.bootstrap4.js
@@ -13,6 +13,25 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  function checkedCheckboxesCount(element, formSettings) {
+    var wrapperClass = formSettings.html_settings.wrapper_class;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+  }
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+
+      if (checkedCheckboxesCount(element, formSettings) === 0) {
+        return options.message;
+      }
+    } else {
+      return originalPresenceValidator(element, options);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -51,6 +70,36 @@
           element.removeClass('is-invalid');
           errorElement.remove();
         }
+      },
+
+      get horizontal_collection() {
+        return this.vertical_collection;
+      },
+
+      vertical_collection: {
+        add: function add(element, settings, message) {
+          var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+
+          if (!errorElement.length) {
+            errorElement = $('<' + settings.error_tag + '>', {
+              "class": 'invalid-feedback d-block',
+              text: message
+            });
+            element.closest('.form-check').siblings('.form-check:last').after(errorElement);
+          }
+
+          wrapperElement.addClass(settings.wrapper_error_class);
+          wrapperElement.find('input:visible').addClass('is-invalid');
+          errorElement.text(message);
+        },
+        remove: function remove(element, settings) {
+          var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+          wrapperElement.removeClass(settings.wrapper_error_class);
+          errorElement.remove();
+          wrapperElement.find('input:visible').removeClass('is-invalid');
+        }
       }
     }
   };
diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js
index 74ca450..d87cb78 100644
--- a/dist/simple-form.esm.js
+++ b/dist/simple-form.esm.js
@@ -7,6 +7,25 @@
 import $ from 'jquery';
 import ClientSideValidations from '@client-side-validations/client-side-validations';
 
+var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+function checkedCheckboxesCount(element, formSettings) {
+  var wrapperClass = formSettings.html_settings.wrapper_class;
+  return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+}
+
+ClientSideValidations.validators.local.presence = function (element, options) {
+  if (element.attr('type') === 'checkbox') {
+    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+
+    if (checkedCheckboxesCount(element, formSettings) === 0) {
+      return options.message;
+    }
+  } else {
+    return originalPresenceValidator(element, options);
+  }
+};
+
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function add(element, settings, message) {
     this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -31,7 +50,12 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
             "class": settings.error_class,
             text: message
           });
-          wrapper.append(errorElement);
+
+          if (wrapper.hasClass('check_boxes')) {
+            element.closest('.checkbox').siblings('.checkbox:last').after(errorElement);
+          } else {
+            wrapper.append(errorElement);
+          }
         }
 
         wrapper.addClass(settings.wrapper_error_class);
diff --git a/dist/simple-form.js b/dist/simple-form.js
index 62decb9..9ae525b 100644
--- a/dist/simple-form.js
+++ b/dist/simple-form.js
@@ -13,6 +13,25 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  function checkedCheckboxesCount(element, formSettings) {
+    var wrapperClass = formSettings.html_settings.wrapper_class;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+  }
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+
+      if (checkedCheckboxesCount(element, formSettings) === 0) {
+        return options.message;
+      }
+    } else {
+      return originalPresenceValidator(element, options);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -37,7 +56,12 @@
               "class": settings.error_class,
               text: message
             });
-            wrapper.append(errorElement);
+
+            if (wrapper.hasClass('check_boxes')) {
+              element.closest('.checkbox').siblings('.checkbox:last').after(errorElement);
+            } else {
+              wrapper.append(errorElement);
+            }
           }
 
           wrapper.addClass(settings.wrapper_error_class);
diff --git a/lib/client_side_validations/simple_form/form_builder.rb b/lib/client_side_validations/simple_form/form_builder.rb
index e23bce3..3a9b5db 100644
--- a/lib/client_side_validations/simple_form/form_builder.rb
+++ b/lib/client_side_validations/simple_form/form_builder.rb
@@ -27,6 +27,16 @@ def input(attribute_name, options = {}, &block)
         super(attribute_name, options, &block)
       end
 
+      # these methods don't call `super` in SimpleForm and therefore don't use overriden CSV FromBuilder methods
+      # and therefore aren't included in CSV validations hash.. we add them to the hash here
+      %i[collection_check_boxes collection_radio_buttons].each do |method_name|
+        define_method method_name do |method, collection, value_method, text_method, options = {}, html_options = {}, &block| # rubocop:disable Metrics/ParameterLists
+          build_validation_options method, html_options.merge(name: options[:name])
+          add_field_specific_wrapper_name_to_field_options(method_name, options, &block)
+          super(method, collection, value_method, text_method, options, html_options, &block)
+        end
+      end
+
       private
 
       def wrapper_error_component
diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js
index 6044c0e..05fce0f 100644
--- a/src/main.bootstrap4.js
+++ b/src/main.bootstrap4.js
@@ -1,5 +1,6 @@
 import $ from 'jquery'
 import ClientSideValidations from '@client-side-validations/client-side-validations'
+import './radio_checkbox_validators'
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function (element, settings, message) {
@@ -39,6 +40,33 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         element.removeClass('is-invalid')
         errorElement.remove()
       }
+    },
+    get horizontal_collection () {
+      return this.vertical_collection
+    },
+    vertical_collection: {
+      add (element, settings, message) {
+        const wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'))
+        var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
+
+        if (!errorElement.length) {
+          errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message })
+          element.closest('.form-check').siblings('.form-check:last').after(errorElement)
+        }
+
+        wrapperElement.addClass(settings.wrapper_error_class)
+        wrapperElement.find('input:visible').addClass('is-invalid')
+        errorElement.text(message)
+      },
+      remove (element, settings) {
+        const wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'))
+        const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
+
+        wrapperElement.removeClass(settings.wrapper_error_class)
+        errorElement.remove()
+        wrapperElement.find('input:visible').removeClass('is-invalid')
+      }
+
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index b3e9bf7..2496cb7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import $ from 'jquery'
 import ClientSideValidations from '@client-side-validations/client-side-validations'
+import './radio_checkbox_validators'
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function (element, settings, message) {
@@ -23,7 +24,12 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
 
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', { class: settings.error_class, text: message })
-          wrapper.append(errorElement)
+
+          if (wrapper.hasClass('check_boxes')) {
+            element.closest('.checkbox').siblings('.checkbox:last').after(errorElement)
+          } else {
+            wrapper.append(errorElement)
+          }
         }
 
         wrapper.addClass(settings.wrapper_error_class)
diff --git a/src/radio_checkbox_validators.js b/src/radio_checkbox_validators.js
new file mode 100644
index 0000000..208505f
--- /dev/null
+++ b/src/radio_checkbox_validators.js
@@ -0,0 +1,21 @@
+import ClientSideValidations from '@client-side-validations/client-side-validations'
+
+const originalPresenceValidator = ClientSideValidations.validators.local.presence
+
+function checkedCheckboxesCount (element, formSettings) {
+  const wrapperClass = formSettings.html_settings.wrapper_class
+
+  return element.closest(`.${wrapperClass.replace(/ /g, '.')}`).find('input[type="checkbox"]:checked').length
+}
+
+ClientSideValidations.validators.local.presence = function (element, options) {
+  if (element.attr('type') === 'checkbox') {
+    const formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations')
+
+    if (checkedCheckboxesCount(element, formSettings) === 0) {
+      return options.message
+    }
+  } else {
+    return originalPresenceValidator(element, options)
+  }
+}
diff --git a/test/action_view/test_helper.rb b/test/action_view/test_helper.rb
index 8d5457d..1048a0f 100644
--- a/test/action_view/test_helper.rb
+++ b/test/action_view/test_helper.rb
@@ -26,6 +26,7 @@ def _routes
 
   Routes.draw do
     resources :posts
+    resources :users
   end
 
   def default_url_options
diff --git a/test/javascript/public/test/form_builders/validateSimpleForm.js b/test/javascript/public/test/form_builders/validateSimpleForm.js
index 3643175..7883471 100644
--- a/test/javascript/public/test/form_builders/validateSimpleForm.js
+++ b/test/javascript/public/test/form_builders/validateSimpleForm.js
@@ -21,7 +21,8 @@ QUnit.module('Validate SimpleForm', {
       },
       validators: {
         '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' }] }
+        'user[date_of_birth]': { presence: [{ message: 'must be present' }] },
+        'user[role_ids]': { presence: [{ message: 'must be present' }] }
       }
     }
 
@@ -31,22 +32,66 @@ QUnit.module('Validate SimpleForm', {
         'data-client-side-validations': JSON.stringify(dataCsv),
         method: 'post',
         id: 'new_user'
-      }))
-      .find('form')
-      .append($('<div class="input">'))
-      .find('div')
-      .append($('<input />', {
-        name: 'user[name]',
-        id: 'user_name',
-        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'
-      }))
+      })
+      .append($('<div class="input">')
+        .append($('<input />', {
+          name: 'user[name]',
+          id: 'user_name',
+          type: 'text'
+        }))
+        .append($('<label for="user_name">Name</label>'))
+      )
+      .append($('<div class="input">')
+        .append($('<input />', {
+          name: 'user[date_of_birth]',
+          id: 'date_of_birth',
+          type: 'text',
+          'data-client-side-validations-wrapper': 'custom_date_wrapper'
+        }))
+      )
+      .append($('<div>', { class: "input check_boxes required user_roles" })
+        .append('<label class="check_boxes required"><abbr title="required">*</abbr> Roles</label>')
+        .append('<input type="hidden" name="user[role_ids][]" value="">')
+        .append($('<span class="checkbox">')
+          .append($('<label for="user_role_ids_1">')
+            .append($('<input />', {
+              class: 'check_boxes required',
+              type: 'checkbox',
+              value: '1',
+              name: 'user[role_ids][]',
+              id: 'user_role_ids_1',
+              'data-validate': 'true'
+            }))
+          .append('Manager'))
+        )
+        .append($('<span class="checkbox">')
+          .append($('<label for="user_role_ids_2">')
+            .append($('<input />', {
+              class: 'check_boxes required',
+              type: 'checkbox',
+              value: '2',
+              name: 'user[role_ids][]',
+              id: 'user_role_ids_2',
+              'data-validate': 'true'
+            }))
+          .append('Technical'))
+        )
+        .append($('<span class="checkbox">')
+          .append($('<label for="user_role_ids_3">')
+            .append($('<input />', {
+              class: 'check_boxes required',
+              type: 'checkbox',
+              value: '3',
+              name: 'user[role_ids][]',
+              id: 'user_role_ids_3',
+              'data-validate': 'true'
+            }))
+          .append('Driver'))
+        )
+
+      )
+    )
+
     $('form#new_user').validate()
   }
 })
@@ -94,10 +139,11 @@ QUnit.test('Validate correct JS Builder\'s wrapper is called for custom_wrapper'
   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;
+  const flag = {}
+  flag['customWrapperCalled'] = false;
 
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers['custom_date_wrapper'] = {
-    add: function(element, settings, message) { customWrapperCalled=true; },
+    add: function(element, settings, message) { flag['customWrapperCalled']=true; },
     remove: function(element, settings) {}
   }
 
@@ -105,6 +151,26 @@ QUnit.test('Validate correct JS Builder\'s wrapper is called for custom_wrapper'
   var input = form.find('input#date_of_birth')
   input.trigger('focusout')
 
-  assert.ok(customWrapperCalled);
+  assert.ok(flag['customWrapperCalled']);
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers = oldWrappers
 })
+
+QUnit.test('Validate error attaching and detaching for checkboxes', function (assert) {
+  const form = $('form#new_user');
+  const wrapperElement = form.find('div.input.user_roles')
+  const checkbox1 = $('#user_role_ids_1');
+  const checkbox3 = $('#user_role_ids_3');
+
+  checkbox1.trigger('change')
+  checkbox1.trigger('focusout')
+
+  assert.ok(wrapperElement.hasClass('field_with_errors'))
+  assert.ok(checkbox3.closest('.checkbox').next('span.error').length == 1)
+
+  checkbox3.attr('checked', true)
+  checkbox3.trigger('change')
+  checkbox3.trigger('focusout')
+
+  assert.notOk(wrapperElement.hasClass('field_with_errors'))
+  assert.ok(form.find('span.error').length == 0)
+})
diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
index 753e494..9bdaa54 100644
--- a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
+++ b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
@@ -20,7 +20,8 @@ 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[role_ids]': { presence: [{ message: 'must be present' }] }
       }
     }
 
@@ -50,15 +51,130 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                         $('<span>', { 'class': 'input-group-text', text: '@' })))
                   .append(
                     $('<input />', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' })))))
+        .append(
+          $('<form>', {
+            action: '/users',
+            'data-client-side-validations': JSON.stringify(dataCsv),
+            method: 'post',
+            id: 'new_user_vertical_form'
+          })
+            .append(
+              $('<fieldset>', { 'class': 'form-group check_boxes required user_roles' })
+                .append(
+                  $('<legend class="col-form-label pt-0">Check roles <abbr title="required">*</abbr></legend>'))
+                .append(
+                  $('<input type="hidden" name="user[role_ids][]" value="">'))
+                .append(
+                  $('<div>', { 'class': 'form-check' })
+                    .append(
+                      $('<input />', {
+                        class: 'form-check-input check_boxes required',
+                        name: 'user[role_ids][]',
+                        id: 'user_role_ids_1',
+                        value: 1,
+                        type: 'checkbox',
+                        'data-client-side-validations-wrapper': 'vertical_collection' }
+                      ))
+                    .append('<label class="collection_check_boxes" for="user_roles_ids_1">Manager</label>')
+                )
+                .append(
+                  $('<div>', { 'class': 'form-check' })
+                    .append(
+                      $('<input />', {
+                        class: 'form-check-input check_boxes required',
+                        name: 'user[role_ids][]',
+                        id: 'user_role_ids_2',
+                        value: 2,
+                        type: 'checkbox',
+                        'data-client-side-validations-wrapper': 'vertical_collection' }
+                      ))
+                    .append('<label class="collection_check_boxes" for="user_roles_ids_1">Technical support</label>')
+                )
+                .append(
+                  $('<div>', { 'class': 'form-check' })
+                    .append(
+                      $('<input />', {
+                        class: 'form-check-input check_boxes required',
+                        name: 'user[role_ids][]',
+                        id: 'user_role_ids_3',
+                        value: 3,
+                        type: 'checkbox',
+                        'data-client-side-validations-wrapper': 'vertical_collection' }
+                      ))
+                    .append('<label class="collection_check_boxes" for="user_roles_ids_1">Tester</label>')
+                )
+
+            )
+        )
+        .append(
+          $('<form>', {
+            action: '/users',
+            'data-client-side-validations': JSON.stringify(dataCsv),
+            method: 'post',
+            id: 'new_user_horizontal_form'
+          })
+            .append(
+              $('<div>', { 'class': 'form-group row check_boxes required user_roles' })
+                .append(
+                  $('<label class="col-sm-3 col-form-label check_boxes required">Check roles <abbr title="required">*</abbr></label>'))
+                .append($('<div>', { class: 'col-sm-9' })
+                  .append(
+                    $('<input type="hidden" name="user[role_ids][]" value="">'))
+                  .append(
+                    $('<div>', { 'class': 'form-check' })
+                      .append(
+                        $('<input />', {
+                          class: 'form-check-input check_boxes required',
+                          name: 'user[role_ids][]',
+                          id: 'user_role_ids_1',
+                          value: 1,
+                          type: 'checkbox',
+                          'data-client-side-validations-wrapper': 'horizontal_collection' }
+                        ))
+                      .append('<label class="collection_check_boxes" for="user_roles_ids_1">Manager</label>')
+                  )
+                  .append(
+                    $('<div>', { 'class': 'form-check' })
+                      .append(
+                        $('<input />', {
+                          class: 'form-check-input check_boxes required',
+                          name: 'user[role_ids][]',
+                          id: 'user_role_ids_2',
+                          value: 2,
+                          type: 'checkbox',
+                          'data-client-side-validations-wrapper': 'horizontal_collection' }
+                        ))
+                      .append('<label class="collection_check_boxes" for="user_roles_ids_1">Technical support</label>')
+                  )
+                  .append(
+                    $('<div>', { 'class': 'form-check' })
+                      .append(
+                        $('<input />', {
+                          class: 'form-check-input check_boxes required',
+                          name: 'user[role_ids][]',
+                          id: 'user_role_ids_3',
+                          value: 3,
+                          type: 'checkbox',
+                          'data-client-side-validations-wrapper': 'horizontal_collection' }
+                        ))
+                      .append('<label class="collection_check_boxes" for="user_roles_ids_1">Tester</label>')
+                  )
+
+              )
+
+            )
+        )
 
     $('form#new_user').validate()
+    $('form#new_user_vertical_form').validate()
+    $('form#new_user_horizontal_form').validate()
   }
 })
 
 var wrappers = ['horizontal_form', 'vertical_form', 'inline_form']
 
 for (var i = 0; i < wrappers.length; i++) {
-  var wrapper = wrappers[i]
+  const wrapper = wrappers[i]
 
   QUnit.test(wrapper + ' - Validate error attaching and detaching', function (assert) {
     var form = $('form#new_user')
@@ -116,4 +232,59 @@ 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 associations checkboxes', function (assert) {
+    var form = $('form#new_user_' +  wrapper)[0] || $('form#new_user_vertical_form')[0]
+    form.ClientSideValidations.settings.html_settings.wrapper = wrapper
+
+    form = $(form)
+
+    var wrapperElement = form.find('.form-group.user_roles')
+    var checkbox1 = form.find('input#user_role_ids_1')
+    var checkbox2 = form.find('input#user_role_ids_2')
+    var checkbox3 = form.find('input#user_role_ids_3')
+
+    assert.ok(wrapperElement.find('div.invalid-feedback').length === 0)
+
+    checkbox1.trigger('change')
+    checkbox1.trigger('focusout')
+
+    assert.ok(wrapperElement.hasClass('form-group-invalid'))
+    assert.ok(checkbox1.hasClass('is-invalid'))
+    assert.ok(checkbox3.hasClass('is-invalid'))
+
+    assert.ok(checkbox3.closest('.form-check').next('.invalid-feedback').length === 1)
+    assert.ok(wrapperElement.find('div.invalid-feedback').length === 1)
+
+    checkbox2.attr('checked', true)
+    checkbox2.trigger('change')
+    checkbox2.trigger('focusout')
+
+    assert.notOk(wrapperElement.hasClass('form-group-invalid'))
+    assert.ok(wrapperElement.find('.is-invalid').length===0)
+    assert.ok(wrapperElement.find('.invalid-feedback').length === 0)
+  })
+
+  QUnit.test(wrapper + ' - Validate associations checkboxes server feedback reused', function (assert) {
+    var form = $('form#new_user_' +  wrapper)[0] || $('form#new_user_vertical_form')[0]
+    form.ClientSideValidations.settings.html_settings.wrapper = wrapper
+
+    form = $(form)
+
+    var wrapperElement = form.find('.form-group.user_roles')
+    var checkbox3 = form.find('input#user_role_ids_3')
+
+    assert.ok(wrapperElement.find('.invalid-feedback').length === 0)
+    checkbox3.closest('.form-check').after($('<div class="invalid-feedback">Error from Server</span>'))
+
+    checkbox3.trigger('change')
+    checkbox3.trigger('focusout')
+
+    assert.ok(wrapperElement.hasClass('form-group-invalid'))
+    assert.ok(wrapperElement.find('input.is-invalid').length === 3)
+    assert.ok(wrapperElement.find('.invalid-feedback').length === 1)
+  })
+
+
+
 }
diff --git a/test/simple_form/cases/helper.rb b/test/simple_form/cases/helper.rb
index 17af375..102025b 100644
--- a/test/simple_form/cases/helper.rb
+++ b/test/simple_form/cases/helper.rb
@@ -3,6 +3,7 @@
 require 'base_helper'
 require 'action_view'
 require 'client_side_validations/simple_form'
+require 'simple_form/models'
 
 def swap_wrapper(wrapper, name = :default)
   old = SimpleForm.wrappers[name.to_s]
diff --git a/test/simple_form/cases/test_form_helpers.rb b/test/simple_form/cases/test_form_helpers.rb
index 5aea45d..5aac686 100644
--- a/test/simple_form/cases/test_form_helpers.rb
+++ b/test/simple_form/cases/test_form_helpers.rb
@@ -15,31 +15,39 @@ def client_side_form_settings_helper
 
       def setup
         super
+
+        @user = User.new
+
         ::ActionView::TestCase::TestController.any_instance.stubs(:action_name).returns('edit')
       end
 
+      CSV_CONFIGURATION_PART_OF_HASH = {
+        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: ',' }
+      }.freeze
+
       def test_simple_form_for
         simple_form_for(@post, validate: true) do |f|
           concat f.input(:cost)
         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:    {
-            'post[cost]' => {
-              presence: [{ message: "can't be blank" }]
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge(
+          {
+            validators: {
+              'post[cost]' => {
+                presence: [{ message: "can't be blank" }]
+              }
             }
           }
-        }
+        )
 
         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="input string required post_cost"><label class="string required" for="post_cost"><abbr title="required">*</abbr> Cost</label><input aria-required="true" class="string required" id="post_cost" name="post[cost]" required="required" type="text" /></div></form>)
 
@@ -56,23 +64,15 @@ def test_nested_simple_fields_for_inherit_validation_settings
           }
         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:    {
-            'post[category_attributes][title]' => {
-              presence: [{ message: "can't be blank" }]
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge(
+          {
+            validators: {
+              'post[category_attributes][title]' => {
+                presence: [{ message: "can't be blank" }]
+              }
             }
           }
-        }
+        )
 
         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="input string required post_category_title"><label class="string required" for="post_category_attributes_title"><abbr title="required">*</abbr> Title</label><input class="string required" required="required" aria-required="true" type="text" name="post[category_attributes][title]" id="post_category_attributes_title" /></div></form>)
 
@@ -84,25 +84,125 @@ def test_input_override
           concat f.input(:cost, validate: false)
         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:    {}
-        }
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge({ 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="input string required post_cost"><label class="string required" for="post_cost"><abbr title="required">*</abbr> Cost</label><input aria-required="true" class="string required" id="post_cost" name="post[cost]" required="required" type="text" /></div></form>)
 
         assert_dom_equal expected, output_buffer
       end
 
+      def test_collection_radio_buttons_validation_is_included_in_csv_hash
+        input_html = ''
+
+        simple_form_for(@post, validate: true) do |f|
+          input_html = f.input(:cost, as: :radio_buttons)
+          concat input_html
+        end
+
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge(
+          {
+            validators: {
+              'post[cost]' => {
+                presence: [{ message: "can't be blank" }]
+              }
+            }
+          }
+        )
+
+        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;" />#{input_html}</form>)
+
+        assert_dom_equal expected, output_buffer
+      end
+
+      def test_collection_radio_buttons_validation_is_not_included_in_csv_hash_when_validate_false
+        input_html = ''
+
+        simple_form_for(@post, validate: true) do |f|
+          input_html = f.input(:cost, as: :radio_buttons, validate: false)
+          concat input_html
+        end
+
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge({ 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;" />#{input_html}</form>)
+
+        assert_dom_equal expected, output_buffer
+      end
+
+      def test_collection_check_boxes_validation_is_included_in_csv_hash
+        input_html = ''
+
+        simple_form_for(@post, validate: true) do |f|
+          input_html = f.input(:cost, as: :check_boxes)
+          concat input_html
+        end
+
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge(
+          {
+            validators: {
+              'post[cost]' => {
+                presence: [{ message: "can't be blank" }]
+              }
+            }
+          }
+        )
+
+        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;" />#{input_html}</form>)
+
+        assert_dom_equal expected, output_buffer
+      end
+
+      def test_habtm_association_field_validation_is_included_in_csv_hash
+        input_html = ''
+
+        simple_form_for(@user, validate: true) do |f|
+          input_html = f.association(:roles, as: :check_boxes)
+          concat input_html
+        end
+
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge(
+          {
+            validators: {
+              'user[role_ids]' => {
+                length: [{
+                  messages: {
+                    maximum: 'is too long (maximum is 99 characters)'
+                  },
+                  maximum:  99
+                }]
+              }
+            }
+          }
+        )
+
+        expected = %(<form accept-charset="UTF-8" action="/users" class="simple_form new_user" data-client-side-validations="#{CGI.escapeHTML(csv_data.to_json)}" id="new_user" method="post" novalidate="novalidate"><input name="utf8" type="hidden" value="&#x2713;" />#{input_html}</form>)
+
+        assert_dom_equal expected, output_buffer
+      end
+
+      def test_belongs_to_association_field_validation_is_included_in_csv_hash
+        input_html = ''
+
+        simple_form_for(@user, validate: true) do |f|
+          input_html = f.association(:department, as: :radio_buttons)
+          concat input_html
+        end
+
+        csv_data = CSV_CONFIGURATION_PART_OF_HASH.merge(
+          {
+            validators: {
+              'user[department_id]' => {
+                presence: [{ message: 'must exist' }]
+              }
+            }
+          }
+        )
+
+        expected = %(<form accept-charset="UTF-8" action="/users" class="simple_form new_user" data-client-side-validations="#{CGI.escapeHTML(csv_data.to_json)}" id="new_user" method="post" novalidate="novalidate"><input name="utf8" type="hidden" value="&#x2713;" />#{input_html}</form>)
+
+        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)
diff --git a/test/simple_form/models.rb b/test/simple_form/models.rb
new file mode 100644
index 0000000..4a4fb3d
--- /dev/null
+++ b/test/simple_form/models.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+require 'simple_form/models/application_record'
+require 'simple_form/models/user'
+require 'simple_form/models/role'
+require 'simple_form/models/department'
diff --git a/test/simple_form/models/application_record.rb b/test/simple_form/models/application_record.rb
new file mode 100644
index 0000000..724c816
--- /dev/null
+++ b/test/simple_form/models/application_record.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require 'active_record'
+
+# Connection must be establised before anything else
+ActiveRecord::Base.establish_connection(
+  adapter:  defined?(JRUBY_VERSION) ? 'jdbcsqlite3' : 'sqlite3',
+  database: ':memory:'
+)
+
+class ApplicationRecord < ActiveRecord::Base
+  self.abstract_class = true
+end
diff --git a/test/simple_form/models/department.rb b/test/simple_form/models/department.rb
new file mode 100644
index 0000000..450d284
--- /dev/null
+++ b/test/simple_form/models/department.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+users_table = %{CREATE TABLE departments (id INTEGER PRIMARY KEY, name VARCHAR(255)); }
+ActiveRecord::Base.connection.execute(users_table)
+
+class Department < ApplicationRecord
+  has_many :users
+end
diff --git a/test/simple_form/models/role.rb b/test/simple_form/models/role.rb
new file mode 100644
index 0000000..08b3786
--- /dev/null
+++ b/test/simple_form/models/role.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+users_table = %{CREATE TABLE roles (id INTEGER PRIMARY KEY, name VARCHAR(255), permissions VARCHAR(255)); }
+ActiveRecord::Base.connection.execute(users_table)
+
+class Role < ApplicationRecord
+  has_and_belongs_to_many :users
+end
diff --git a/test/simple_form/models/user.rb b/test/simple_form/models/user.rb
new file mode 100644
index 0000000..cf2ddce
--- /dev/null
+++ b/test/simple_form/models/user.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+users_table = %{CREATE TABLE users (id INTEGER PRIMARY KEY, name VARCHAR(255), email VARCHAR(255), department_id INTEGER); }
+ActiveRecord::Base.connection.execute(users_table)
+
+class User < ApplicationRecord
+  validates :roles, length: { maximum: 99 }
+
+  has_and_belongs_to_many :roles
+  belongs_to :department, optional: false
+end
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
index d934fa1..df732ea 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
@@ -13,6 +13,25 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  function checkedCheckboxesCount(element, formSettings) {
+    var wrapperClass = formSettings.html_settings.wrapper_class;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+  }
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+
+      if (checkedCheckboxesCount(element, formSettings) === 0) {
+        return options.message;
+      }
+    } else {
+      return originalPresenceValidator(element, options);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -51,6 +70,36 @@
           element.removeClass('is-invalid');
           errorElement.remove();
         }
+      },
+
+      get horizontal_collection() {
+        return this.vertical_collection;
+      },
+
+      vertical_collection: {
+        add: function add(element, settings, message) {
+          var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+
+          if (!errorElement.length) {
+            errorElement = $('<' + settings.error_tag + '>', {
+              "class": 'invalid-feedback d-block',
+              text: message
+            });
+            element.closest('.form-check').siblings('.form-check:last').after(errorElement);
+          }
+
+          wrapperElement.addClass(settings.wrapper_error_class);
+          wrapperElement.find('input:visible').addClass('is-invalid');
+          errorElement.text(message);
+        },
+        remove: function remove(element, settings) {
+          var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
+          var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
+          wrapperElement.removeClass(settings.wrapper_error_class);
+          errorElement.remove();
+          wrapperElement.find('input:visible').removeClass('is-invalid');
+        }
       }
     }
   };
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js
index 62decb9..9ae525b 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.js
@@ -13,6 +13,25 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  function checkedCheckboxesCount(element, formSettings) {
+    var wrapperClass = formSettings.html_settings.wrapper_class;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+  }
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+
+      if (checkedCheckboxesCount(element, formSettings) === 0) {
+        return options.message;
+      }
+    } else {
+      return originalPresenceValidator(element, options);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -37,7 +56,12 @@
               "class": settings.error_class,
               text: message
             });
-            wrapper.append(errorElement);
+
+            if (wrapper.hasClass('check_boxes')) {
+              element.closest('.checkbox').siblings('.checkbox:last').after(errorElement);
+            } else {
+              wrapper.append(errorElement);
+            }
           }
 
           wrapper.addClass(settings.wrapper_error_class);

From 98ebaae3833de3d9973e006cfeec8f4897239f50 Mon Sep 17 00:00:00 2001
From: Michal Remis <michal.remis@gmail.com>
Date: Wed, 29 Apr 2020 20:30:26 +0200
Subject: [PATCH 3/6] Checkboxes association length validation

---
 dist/simple-form.bootstrap4.esm.js            | 51 ++++++++++++++++---
 dist/simple-form.bootstrap4.js                | 51 ++++++++++++++++---
 dist/simple-form.esm.js                       | 51 ++++++++++++++++---
 dist/simple-form.js                           | 51 ++++++++++++++++---
 src/main.bootstrap4.js                        |  4 +-
 src/main.js                                   |  4 +-
 src/radio_checkbox_validators.js              | 21 --------
 src/validator_overrides/helper.js             |  7 +++
 src/validator_overrides/index.js              |  2 +
 src/validator_overrides/length.js             | 39 ++++++++++++++
 src/validator_overrides/presence.js           | 14 +++++
 .../validateSimpleFormBootstrap4.js           | 23 ++++++---
 test/simple_form/models/user.rb               |  2 +-
 ...ails.validations.simple_form.bootstrap4.js | 51 ++++++++++++++++---
 .../rails.validations.simple_form.js          | 51 ++++++++++++++++---
 15 files changed, 348 insertions(+), 74 deletions(-)
 delete mode 100644 src/radio_checkbox_validators.js
 create mode 100644 src/validator_overrides/helper.js
 create mode 100644 src/validator_overrides/index.js
 create mode 100644 src/validator_overrides/length.js
 create mode 100644 src/validator_overrides/presence.js

diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
index f661b2f..544259c 100644
--- a/dist/simple-form.bootstrap4.esm.js
+++ b/dist/simple-form.bootstrap4.esm.js
@@ -7,18 +7,55 @@
 import $ from 'jquery';
 import ClientSideValidations from '@client-side-validations/client-side-validations';
 
-var originalPresenceValidator = ClientSideValidations.validators.local.presence;
-
-function checkedCheckboxesCount(element, formSettings) {
+function checkedCheckboxesCount(element) {
+  var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
   var wrapperClass = formSettings.html_settings.wrapper_class;
   return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
 }
 
-ClientSideValidations.validators.local.presence = function (element, options) {
+var originalLengthValidator = ClientSideValidations.validators.local.length;
+var VALIDATIONS = {
+  is: function is(a, b) {
+    return a === parseInt(b, 10);
+  },
+  minimum: function minimum(a, b) {
+    return a >= parseInt(b, 10);
+  },
+  maximum: function maximum(a, b) {
+    return a <= parseInt(b, 10);
+  }
+};
+
+var runValidations = function runValidations(valueLength, options) {
+  for (var validation in VALIDATIONS) {
+    var validationOption = options[validation];
+    var validationFunction = VALIDATIONS[validation];
+
+    if (validationOption && !validationFunction(valueLength, validationOption)) {
+      return options.messages[validation];
+    }
+  }
+};
+
+ClientSideValidations.validators.local.length = function (element, options) {
   if (element.attr('type') === 'checkbox') {
-    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+    var count = checkedCheckboxesCount(element);
+
+    if (options.allow_blank && count === 0) {
+      return;
+    }
 
-    if (checkedCheckboxesCount(element, formSettings) === 0) {
+    return runValidations(count, options);
+  } else {
+    return originalLengthValidator(element, options);
+  }
+};
+
+var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+ClientSideValidations.validators.local.presence = function (element, options) {
+  if (element.attr('type') === 'checkbox') {
+    if (checkedCheckboxesCount(element) === 0) {
       return options.message;
     }
   } else {
@@ -80,7 +117,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
             "class": 'invalid-feedback d-block',
             text: message
           });
-          element.closest('.form-check').siblings('.form-check:last').after(errorElement);
+          element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
         }
 
         wrapperElement.addClass(settings.wrapper_error_class);
diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js
index df732ea..2605341 100644
--- a/dist/simple-form.bootstrap4.js
+++ b/dist/simple-form.bootstrap4.js
@@ -13,18 +13,55 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
-
-  function checkedCheckboxesCount(element, formSettings) {
+  function checkedCheckboxesCount(element) {
+    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
     return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
   }
 
-  ClientSideValidations.validators.local.presence = function (element, options) {
+  var originalLengthValidator = ClientSideValidations.validators.local.length;
+  var VALIDATIONS = {
+    is: function is(a, b) {
+      return a === parseInt(b, 10);
+    },
+    minimum: function minimum(a, b) {
+      return a >= parseInt(b, 10);
+    },
+    maximum: function maximum(a, b) {
+      return a <= parseInt(b, 10);
+    }
+  };
+
+  var runValidations = function runValidations(valueLength, options) {
+    for (var validation in VALIDATIONS) {
+      var validationOption = options[validation];
+      var validationFunction = VALIDATIONS[validation];
+
+      if (validationOption && !validationFunction(valueLength, validationOption)) {
+        return options.messages[validation];
+      }
+    }
+  };
+
+  ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+      var count = checkedCheckboxesCount(element);
+
+      if (options.allow_blank && count === 0) {
+        return;
+      }
 
-      if (checkedCheckboxesCount(element, formSettings) === 0) {
+      return runValidations(count, options);
+    } else {
+      return originalLengthValidator(element, options);
+    }
+  };
+
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      if (checkedCheckboxesCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -86,7 +123,7 @@
               "class": 'invalid-feedback d-block',
               text: message
             });
-            element.closest('.form-check').siblings('.form-check:last').after(errorElement);
+            element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);
diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js
index d87cb78..b80889c 100644
--- a/dist/simple-form.esm.js
+++ b/dist/simple-form.esm.js
@@ -7,18 +7,55 @@
 import $ from 'jquery';
 import ClientSideValidations from '@client-side-validations/client-side-validations';
 
-var originalPresenceValidator = ClientSideValidations.validators.local.presence;
-
-function checkedCheckboxesCount(element, formSettings) {
+function checkedCheckboxesCount(element) {
+  var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
   var wrapperClass = formSettings.html_settings.wrapper_class;
   return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
 }
 
-ClientSideValidations.validators.local.presence = function (element, options) {
+var originalLengthValidator = ClientSideValidations.validators.local.length;
+var VALIDATIONS = {
+  is: function is(a, b) {
+    return a === parseInt(b, 10);
+  },
+  minimum: function minimum(a, b) {
+    return a >= parseInt(b, 10);
+  },
+  maximum: function maximum(a, b) {
+    return a <= parseInt(b, 10);
+  }
+};
+
+var runValidations = function runValidations(valueLength, options) {
+  for (var validation in VALIDATIONS) {
+    var validationOption = options[validation];
+    var validationFunction = VALIDATIONS[validation];
+
+    if (validationOption && !validationFunction(valueLength, validationOption)) {
+      return options.messages[validation];
+    }
+  }
+};
+
+ClientSideValidations.validators.local.length = function (element, options) {
   if (element.attr('type') === 'checkbox') {
-    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+    var count = checkedCheckboxesCount(element);
+
+    if (options.allow_blank && count === 0) {
+      return;
+    }
 
-    if (checkedCheckboxesCount(element, formSettings) === 0) {
+    return runValidations(count, options);
+  } else {
+    return originalLengthValidator(element, options);
+  }
+};
+
+var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+ClientSideValidations.validators.local.presence = function (element, options) {
+  if (element.attr('type') === 'checkbox') {
+    if (checkedCheckboxesCount(element) === 0) {
       return options.message;
     }
   } else {
@@ -52,7 +89,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
           });
 
           if (wrapper.hasClass('check_boxes')) {
-            element.closest('.checkbox').siblings('.checkbox:last').after(errorElement);
+            element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement);
           } else {
             wrapper.append(errorElement);
           }
diff --git a/dist/simple-form.js b/dist/simple-form.js
index 9ae525b..bf0b822 100644
--- a/dist/simple-form.js
+++ b/dist/simple-form.js
@@ -13,18 +13,55 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
-
-  function checkedCheckboxesCount(element, formSettings) {
+  function checkedCheckboxesCount(element) {
+    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
     return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
   }
 
-  ClientSideValidations.validators.local.presence = function (element, options) {
+  var originalLengthValidator = ClientSideValidations.validators.local.length;
+  var VALIDATIONS = {
+    is: function is(a, b) {
+      return a === parseInt(b, 10);
+    },
+    minimum: function minimum(a, b) {
+      return a >= parseInt(b, 10);
+    },
+    maximum: function maximum(a, b) {
+      return a <= parseInt(b, 10);
+    }
+  };
+
+  var runValidations = function runValidations(valueLength, options) {
+    for (var validation in VALIDATIONS) {
+      var validationOption = options[validation];
+      var validationFunction = VALIDATIONS[validation];
+
+      if (validationOption && !validationFunction(valueLength, validationOption)) {
+        return options.messages[validation];
+      }
+    }
+  };
+
+  ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+      var count = checkedCheckboxesCount(element);
+
+      if (options.allow_blank && count === 0) {
+        return;
+      }
 
-      if (checkedCheckboxesCount(element, formSettings) === 0) {
+      return runValidations(count, options);
+    } else {
+      return originalLengthValidator(element, options);
+    }
+  };
+
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      if (checkedCheckboxesCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -58,7 +95,7 @@
             });
 
             if (wrapper.hasClass('check_boxes')) {
-              element.closest('.checkbox').siblings('.checkbox:last').after(errorElement);
+              element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement);
             } else {
               wrapper.append(errorElement);
             }
diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js
index 05fce0f..f4c0b18 100644
--- a/src/main.bootstrap4.js
+++ b/src/main.bootstrap4.js
@@ -1,6 +1,6 @@
 import $ from 'jquery'
 import ClientSideValidations from '@client-side-validations/client-side-validations'
-import './radio_checkbox_validators'
+import './validator_overrides/index'
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function (element, settings, message) {
@@ -51,7 +51,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
 
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message })
-          element.closest('.form-check').siblings('.form-check:last').after(errorElement)
+          element.closest('.form-check').parent().children('.form-check:last').after(errorElement)
         }
 
         wrapperElement.addClass(settings.wrapper_error_class)
diff --git a/src/main.js b/src/main.js
index 2496cb7..3f6064e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import $ from 'jquery'
 import ClientSideValidations from '@client-side-validations/client-side-validations'
-import './radio_checkbox_validators'
+import './validator_overrides/index'
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function (element, settings, message) {
@@ -26,7 +26,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
           errorElement = $('<' + settings.error_tag + '>', { class: settings.error_class, text: message })
 
           if (wrapper.hasClass('check_boxes')) {
-            element.closest('.checkbox').siblings('.checkbox:last').after(errorElement)
+            element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement)
           } else {
             wrapper.append(errorElement)
           }
diff --git a/src/radio_checkbox_validators.js b/src/radio_checkbox_validators.js
deleted file mode 100644
index 208505f..0000000
--- a/src/radio_checkbox_validators.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import ClientSideValidations from '@client-side-validations/client-side-validations'
-
-const originalPresenceValidator = ClientSideValidations.validators.local.presence
-
-function checkedCheckboxesCount (element, formSettings) {
-  const wrapperClass = formSettings.html_settings.wrapper_class
-
-  return element.closest(`.${wrapperClass.replace(/ /g, '.')}`).find('input[type="checkbox"]:checked').length
-}
-
-ClientSideValidations.validators.local.presence = function (element, options) {
-  if (element.attr('type') === 'checkbox') {
-    const formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations')
-
-    if (checkedCheckboxesCount(element, formSettings) === 0) {
-      return options.message
-    }
-  } else {
-    return originalPresenceValidator(element, options)
-  }
-}
diff --git a/src/validator_overrides/helper.js b/src/validator_overrides/helper.js
new file mode 100644
index 0000000..d011a45
--- /dev/null
+++ b/src/validator_overrides/helper.js
@@ -0,0 +1,7 @@
+
+export function checkedCheckboxesCount (element) {
+  const formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations')
+  const wrapperClass = formSettings.html_settings.wrapper_class
+
+  return element.closest(`.${wrapperClass.replace(/ /g, '.')}`).find('input[type="checkbox"]:checked').length
+}
diff --git a/src/validator_overrides/index.js b/src/validator_overrides/index.js
new file mode 100644
index 0000000..31d0d9d
--- /dev/null
+++ b/src/validator_overrides/index.js
@@ -0,0 +1,2 @@
+import './length'
+import './presence'
diff --git a/src/validator_overrides/length.js b/src/validator_overrides/length.js
new file mode 100644
index 0000000..9f869b7
--- /dev/null
+++ b/src/validator_overrides/length.js
@@ -0,0 +1,39 @@
+import ClientSideValidations from '@client-side-validations/client-side-validations'
+import { checkedCheckboxesCount } from './helper'
+
+const originalLengthValidator = ClientSideValidations.validators.local.length
+
+const VALIDATIONS = {
+  is: (a, b) => {
+    return (a === parseInt(b, 10))
+  },
+  minimum: (a, b) => {
+    return (a >= parseInt(b, 10))
+  },
+  maximum: (a, b) => {
+    return (a <= parseInt(b, 10))
+  }
+}
+
+const runValidations = (valueLength, options) => {
+  for (const validation in VALIDATIONS) {
+    const validationOption = options[validation]
+    const validationFunction = VALIDATIONS[validation]
+
+    if (validationOption && !validationFunction(valueLength, validationOption)) {
+      return options.messages[validation]
+    }
+  }
+}
+
+ClientSideValidations.validators.local.length = (element, options) => {
+  if (element.attr('type') === 'checkbox') {
+    const count = checkedCheckboxesCount(element)
+    if (options.allow_blank && count === 0) {
+      return
+    }
+    return runValidations(count, options)
+  } else {
+    return originalLengthValidator(element, options)
+  }
+}
diff --git a/src/validator_overrides/presence.js b/src/validator_overrides/presence.js
new file mode 100644
index 0000000..e90f8a1
--- /dev/null
+++ b/src/validator_overrides/presence.js
@@ -0,0 +1,14 @@
+import ClientSideValidations from '@client-side-validations/client-side-validations'
+import { checkedCheckboxesCount } from './helper'
+
+const originalPresenceValidator = ClientSideValidations.validators.local.presence
+
+ClientSideValidations.validators.local.presence = function (element, options) {
+  if (element.attr('type') === 'checkbox') {
+    if (checkedCheckboxesCount(element) === 0) {
+      return options.message
+    }
+  } else {
+    return originalPresenceValidator(element, options)
+  }
+}
diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
index 9bdaa54..d212ffd 100644
--- a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
+++ b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
@@ -21,7 +21,10 @@ 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[role_ids]': { presence: [{ message: 'must be present' }] }
+        'user[role_ids]': {
+          presence: [{ message: 'must be present' }],
+          length:[{ messages: { maximum: 'is too long (maximum is 2 characters)' }, maximum: 2 }]
+        }
       }
     }
 
@@ -246,8 +249,8 @@ for (var i = 0; i < wrappers.length; i++) {
 
     assert.ok(wrapperElement.find('div.invalid-feedback').length === 0)
 
-    checkbox1.trigger('change')
-    checkbox1.trigger('focusout')
+    checkbox3.trigger('change')
+    checkbox3.trigger('focusout')
 
     assert.ok(wrapperElement.hasClass('form-group-invalid'))
     assert.ok(checkbox1.hasClass('is-invalid'))
@@ -256,13 +259,21 @@ for (var i = 0; i < wrappers.length; i++) {
     assert.ok(checkbox3.closest('.form-check').next('.invalid-feedback').length === 1)
     assert.ok(wrapperElement.find('div.invalid-feedback').length === 1)
 
-    checkbox2.attr('checked', true)
-    checkbox2.trigger('change')
-    checkbox2.trigger('focusout')
+    checkbox1.attr('checked', true)
+    checkbox1.trigger('change')
+    checkbox1.trigger('focusout')
 
     assert.notOk(wrapperElement.hasClass('form-group-invalid'))
     assert.ok(wrapperElement.find('.is-invalid').length===0)
     assert.ok(wrapperElement.find('.invalid-feedback').length === 0)
+
+    checkbox2.attr('checked', true)
+    checkbox3.attr('checked', true)
+    checkbox3.trigger('change')
+    checkbox3.trigger('focusout')
+
+    assert.ok(wrapperElement.hasClass('form-group-invalid'))
+    assert.ok(wrapperElement.find('.invalid-feedback').html().includes('is too long'))
   })
 
   QUnit.test(wrapper + ' - Validate associations checkboxes server feedback reused', function (assert) {
diff --git a/test/simple_form/models/user.rb b/test/simple_form/models/user.rb
index cf2ddce..93de189 100644
--- a/test/simple_form/models/user.rb
+++ b/test/simple_form/models/user.rb
@@ -4,7 +4,7 @@
 ActiveRecord::Base.connection.execute(users_table)
 
 class User < ApplicationRecord
-  validates :roles, length: { maximum: 99 }
+  validates :roles, length: { maximum: 2 }
 
   has_and_belongs_to_many :roles
   belongs_to :department, optional: false
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
index df732ea..2605341 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
@@ -13,18 +13,55 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
-
-  function checkedCheckboxesCount(element, formSettings) {
+  function checkedCheckboxesCount(element) {
+    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
     return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
   }
 
-  ClientSideValidations.validators.local.presence = function (element, options) {
+  var originalLengthValidator = ClientSideValidations.validators.local.length;
+  var VALIDATIONS = {
+    is: function is(a, b) {
+      return a === parseInt(b, 10);
+    },
+    minimum: function minimum(a, b) {
+      return a >= parseInt(b, 10);
+    },
+    maximum: function maximum(a, b) {
+      return a <= parseInt(b, 10);
+    }
+  };
+
+  var runValidations = function runValidations(valueLength, options) {
+    for (var validation in VALIDATIONS) {
+      var validationOption = options[validation];
+      var validationFunction = VALIDATIONS[validation];
+
+      if (validationOption && !validationFunction(valueLength, validationOption)) {
+        return options.messages[validation];
+      }
+    }
+  };
+
+  ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+      var count = checkedCheckboxesCount(element);
+
+      if (options.allow_blank && count === 0) {
+        return;
+      }
 
-      if (checkedCheckboxesCount(element, formSettings) === 0) {
+      return runValidations(count, options);
+    } else {
+      return originalLengthValidator(element, options);
+    }
+  };
+
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      if (checkedCheckboxesCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -86,7 +123,7 @@
               "class": 'invalid-feedback d-block',
               text: message
             });
-            element.closest('.form-check').siblings('.form-check:last').after(errorElement);
+            element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js
index 9ae525b..bf0b822 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.js
@@ -13,18 +13,55 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
-
-  function checkedCheckboxesCount(element, formSettings) {
+  function checkedCheckboxesCount(element) {
+    var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
     return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
   }
 
-  ClientSideValidations.validators.local.presence = function (element, options) {
+  var originalLengthValidator = ClientSideValidations.validators.local.length;
+  var VALIDATIONS = {
+    is: function is(a, b) {
+      return a === parseInt(b, 10);
+    },
+    minimum: function minimum(a, b) {
+      return a >= parseInt(b, 10);
+    },
+    maximum: function maximum(a, b) {
+      return a <= parseInt(b, 10);
+    }
+  };
+
+  var runValidations = function runValidations(valueLength, options) {
+    for (var validation in VALIDATIONS) {
+      var validationOption = options[validation];
+      var validationFunction = VALIDATIONS[validation];
+
+      if (validationOption && !validationFunction(valueLength, validationOption)) {
+        return options.messages[validation];
+      }
+    }
+  };
+
+  ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
+      var count = checkedCheckboxesCount(element);
+
+      if (options.allow_blank && count === 0) {
+        return;
+      }
 
-      if (checkedCheckboxesCount(element, formSettings) === 0) {
+      return runValidations(count, options);
+    } else {
+      return originalLengthValidator(element, options);
+    }
+  };
+
+  var originalPresenceValidator = ClientSideValidations.validators.local.presence;
+
+  ClientSideValidations.validators.local.presence = function (element, options) {
+    if (element.attr('type') === 'checkbox') {
+      if (checkedCheckboxesCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -58,7 +95,7 @@
             });
 
             if (wrapper.hasClass('check_boxes')) {
-              element.closest('.checkbox').siblings('.checkbox:last').after(errorElement);
+              element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement);
             } else {
               wrapper.append(errorElement);
             }

From 76ac1c1957d3dc55d11c9f65827571cb59ec2ae6 Mon Sep 17 00:00:00 2001
From: Michal Remis <michal.remis@gmail.com>
Date: Thu, 30 Apr 2020 01:48:18 +0200
Subject: [PATCH 4/6] Radio buttons association presence validation

---
 Gemfile                                       |   3 +-
 dist/simple-form.bootstrap4.esm.js            |  30 +++-
 dist/simple-form.bootstrap4.js                |  30 +++-
 dist/simple-form.esm.js                       |  33 +++-
 dist/simple-form.js                           |  33 +++-
 .../simple_form/form_builder.rb               |   2 +-
 src/main.bootstrap4.js                        |   1 +
 src/main.js                                   |   4 +-
 src/validator_overrides/helper.js             |   4 +-
 src/validator_overrides/index.js              |  21 +++
 src/validator_overrides/length.js             |   4 +-
 src/validator_overrides/presence.js           |   6 +-
 .../validateSimpleFormBootstrap4.js           | 143 ++++++++++++++++--
 test/simple_form/cases/test_form_helpers.rb   |   4 +-
 ...ails.validations.simple_form.bootstrap4.js |  30 +++-
 .../rails.validations.simple_form.js          |  33 +++-
 16 files changed, 322 insertions(+), 59 deletions(-)

diff --git a/Gemfile b/Gemfile
index 6773bbb..5088d39 100644
--- a/Gemfile
+++ b/Gemfile
@@ -4,5 +4,4 @@ source 'https://rubygems.org'
 
 gemspec
 
-#gem 'client_side_validations', github: 'DavyJonesLocker/client_side_validations'
-gem 'client_side_validations', path: '../client_side_validations'
+gem 'client_side_validations', github: 'MichalRemis/client_side_validations', branch: 'attach-many-JS-validations'
diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
index 544259c..da8b292 100644
--- a/dist/simple-form.bootstrap4.esm.js
+++ b/dist/simple-form.bootstrap4.esm.js
@@ -7,10 +7,10 @@
 import $ from 'jquery';
 import ClientSideValidations from '@client-side-validations/client-side-validations';
 
-function checkedCheckboxesCount(element) {
+function checkedInputsCount(element) {
   var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
   var wrapperClass = formSettings.html_settings.wrapper_class;
-  return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+  return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input:checked').length;
 }
 
 var originalLengthValidator = ClientSideValidations.validators.local.length;
@@ -39,7 +39,7 @@ var runValidations = function runValidations(valueLength, options) {
 
 ClientSideValidations.validators.local.length = function (element, options) {
   if (element.attr('type') === 'checkbox') {
-    var count = checkedCheckboxesCount(element);
+    var count = checkedInputsCount(element);
 
     if (options.allow_blank && count === 0) {
       return;
@@ -54,8 +54,8 @@ ClientSideValidations.validators.local.length = function (element, options) {
 var originalPresenceValidator = ClientSideValidations.validators.local.presence;
 
 ClientSideValidations.validators.local.presence = function (element, options) {
-  if (element.attr('type') === 'checkbox') {
-    if (checkedCheckboxesCount(element) === 0) {
+  if (element.attr('type') === 'checkbox' || element.attr('type') === 'radio') {
+    if (checkedInputsCount(element) === 0) {
       return options.message;
     }
   } else {
@@ -63,6 +63,25 @@ ClientSideValidations.validators.local.presence = function (element, options) {
   }
 };
 
+// It could be fixed in main CSV if radio_buttons validations are needed there and
+// in that case we may removed it from here
+
+var originalInputEnabler = window.ClientSideValidations.enablers.input;
+
+window.ClientSideValidations.enablers.input = function (input) {
+  originalInputEnabler(input);
+  var $input = $(input);
+  var form = input.form;
+  var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+
+  for (var eventName in eventsToBind) {
+    var eventFunction = eventsToBind[eventName];
+    $input.filter(':radio').each(function () {
+      return $(this).attr('data-validate', true);
+    }).on(eventName, eventFunction);
+  }
+};
+
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function add(element, settings, message) {
     this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -118,6 +137,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
             text: message
           });
           element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
+          element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
         }
 
         wrapperElement.addClass(settings.wrapper_error_class);
diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js
index 2605341..7c247bb 100644
--- a/dist/simple-form.bootstrap4.js
+++ b/dist/simple-form.bootstrap4.js
@@ -13,10 +13,10 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  function checkedCheckboxesCount(element) {
+  function checkedInputsCount(element) {
     var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
-    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input:checked').length;
   }
 
   var originalLengthValidator = ClientSideValidations.validators.local.length;
@@ -45,7 +45,7 @@
 
   ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var count = checkedCheckboxesCount(element);
+      var count = checkedInputsCount(element);
 
       if (options.allow_blank && count === 0) {
         return;
@@ -60,8 +60,8 @@
   var originalPresenceValidator = ClientSideValidations.validators.local.presence;
 
   ClientSideValidations.validators.local.presence = function (element, options) {
-    if (element.attr('type') === 'checkbox') {
-      if (checkedCheckboxesCount(element) === 0) {
+    if (element.attr('type') === 'checkbox' || element.attr('type') === 'radio') {
+      if (checkedInputsCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -69,6 +69,25 @@
     }
   };
 
+  // It could be fixed in main CSV if radio_buttons validations are needed there and
+  // in that case we may removed it from here
+
+  var originalInputEnabler = window.ClientSideValidations.enablers.input;
+
+  window.ClientSideValidations.enablers.input = function (input) {
+    originalInputEnabler(input);
+    var $input = $(input);
+    var form = input.form;
+    var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+
+    for (var eventName in eventsToBind) {
+      var eventFunction = eventsToBind[eventName];
+      $input.filter(':radio').each(function () {
+        return $(this).attr('data-validate', true);
+      }).on(eventName, eventFunction);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -124,6 +143,7 @@
               text: message
             });
             element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
+            element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);
diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js
index b80889c..eafdb3a 100644
--- a/dist/simple-form.esm.js
+++ b/dist/simple-form.esm.js
@@ -7,10 +7,10 @@
 import $ from 'jquery';
 import ClientSideValidations from '@client-side-validations/client-side-validations';
 
-function checkedCheckboxesCount(element) {
+function checkedInputsCount(element) {
   var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
   var wrapperClass = formSettings.html_settings.wrapper_class;
-  return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+  return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input:checked').length;
 }
 
 var originalLengthValidator = ClientSideValidations.validators.local.length;
@@ -39,7 +39,7 @@ var runValidations = function runValidations(valueLength, options) {
 
 ClientSideValidations.validators.local.length = function (element, options) {
   if (element.attr('type') === 'checkbox') {
-    var count = checkedCheckboxesCount(element);
+    var count = checkedInputsCount(element);
 
     if (options.allow_blank && count === 0) {
       return;
@@ -54,8 +54,8 @@ ClientSideValidations.validators.local.length = function (element, options) {
 var originalPresenceValidator = ClientSideValidations.validators.local.presence;
 
 ClientSideValidations.validators.local.presence = function (element, options) {
-  if (element.attr('type') === 'checkbox') {
-    if (checkedCheckboxesCount(element) === 0) {
+  if (element.attr('type') === 'checkbox' || element.attr('type') === 'radio') {
+    if (checkedInputsCount(element) === 0) {
       return options.message;
     }
   } else {
@@ -63,6 +63,25 @@ ClientSideValidations.validators.local.presence = function (element, options) {
   }
 };
 
+// It could be fixed in main CSV if radio_buttons validations are needed there and
+// in that case we may removed it from here
+
+var originalInputEnabler = window.ClientSideValidations.enablers.input;
+
+window.ClientSideValidations.enablers.input = function (input) {
+  originalInputEnabler(input);
+  var $input = $(input);
+  var form = input.form;
+  var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+
+  for (var eventName in eventsToBind) {
+    var eventFunction = eventsToBind[eventName];
+    $input.filter(':radio').each(function () {
+      return $(this).attr('data-validate', true);
+    }).on(eventName, eventFunction);
+  }
+};
+
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   add: function add(element, settings, message) {
     this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -88,8 +107,8 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
             text: message
           });
 
-          if (wrapper.hasClass('check_boxes')) {
-            element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement);
+          if (wrapper.hasClass('check_boxes') || wrapper.hasClass('radio_buttons')) {
+            element.closest('.checkbox,.radio').parent().children('.checkbox:last, .radio:last').after(errorElement);
           } else {
             wrapper.append(errorElement);
           }
diff --git a/dist/simple-form.js b/dist/simple-form.js
index bf0b822..f917d62 100644
--- a/dist/simple-form.js
+++ b/dist/simple-form.js
@@ -13,10 +13,10 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  function checkedCheckboxesCount(element) {
+  function checkedInputsCount(element) {
     var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
-    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input:checked').length;
   }
 
   var originalLengthValidator = ClientSideValidations.validators.local.length;
@@ -45,7 +45,7 @@
 
   ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var count = checkedCheckboxesCount(element);
+      var count = checkedInputsCount(element);
 
       if (options.allow_blank && count === 0) {
         return;
@@ -60,8 +60,8 @@
   var originalPresenceValidator = ClientSideValidations.validators.local.presence;
 
   ClientSideValidations.validators.local.presence = function (element, options) {
-    if (element.attr('type') === 'checkbox') {
-      if (checkedCheckboxesCount(element) === 0) {
+    if (element.attr('type') === 'checkbox' || element.attr('type') === 'radio') {
+      if (checkedInputsCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -69,6 +69,25 @@
     }
   };
 
+  // It could be fixed in main CSV if radio_buttons validations are needed there and
+  // in that case we may removed it from here
+
+  var originalInputEnabler = window.ClientSideValidations.enablers.input;
+
+  window.ClientSideValidations.enablers.input = function (input) {
+    originalInputEnabler(input);
+    var $input = $(input);
+    var form = input.form;
+    var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+
+    for (var eventName in eventsToBind) {
+      var eventFunction = eventsToBind[eventName];
+      $input.filter(':radio').each(function () {
+        return $(this).attr('data-validate', true);
+      }).on(eventName, eventFunction);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -94,8 +113,8 @@
               text: message
             });
 
-            if (wrapper.hasClass('check_boxes')) {
-              element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement);
+            if (wrapper.hasClass('check_boxes') || wrapper.hasClass('radio_buttons')) {
+              element.closest('.checkbox,.radio').parent().children('.checkbox:last, .radio:last').after(errorElement);
             } else {
               wrapper.append(errorElement);
             }
diff --git a/lib/client_side_validations/simple_form/form_builder.rb b/lib/client_side_validations/simple_form/form_builder.rb
index 3a9b5db..832694f 100644
--- a/lib/client_side_validations/simple_form/form_builder.rb
+++ b/lib/client_side_validations/simple_form/form_builder.rb
@@ -27,7 +27,7 @@ def input(attribute_name, options = {}, &block)
         super(attribute_name, options, &block)
       end
 
-      # these methods don't call `super` in SimpleForm and therefore don't use overriden CSV FromBuilder methods
+      # these methods don't call `super` in SimpleForm and therefore don't use overriden CSV FormBuilder methods
       # and therefore aren't included in CSV validations hash.. we add them to the hash here
       %i[collection_check_boxes collection_radio_buttons].each do |method_name|
         define_method method_name do |method, collection, value_method, text_method, options = {}, html_options = {}, &block| # rubocop:disable Metrics/ParameterLists
diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js
index f4c0b18..0c6bc7d 100644
--- a/src/main.bootstrap4.js
+++ b/src/main.bootstrap4.js
@@ -52,6 +52,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message })
           element.closest('.form-check').parent().children('.form-check:last').after(errorElement)
+          element.closest('.form-check').parent().children('.form-check:last').after(errorElement)
         }
 
         wrapperElement.addClass(settings.wrapper_error_class)
diff --git a/src/main.js b/src/main.js
index 3f6064e..c0c5ee0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,8 +25,8 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', { class: settings.error_class, text: message })
 
-          if (wrapper.hasClass('check_boxes')) {
-            element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement)
+          if (wrapper.hasClass('check_boxes') || wrapper.hasClass('radio_buttons')) {
+            element.closest('.checkbox,.radio').parent().children('.checkbox:last, .radio:last').after(errorElement)
           } else {
             wrapper.append(errorElement)
           }
diff --git a/src/validator_overrides/helper.js b/src/validator_overrides/helper.js
index d011a45..0c4e958 100644
--- a/src/validator_overrides/helper.js
+++ b/src/validator_overrides/helper.js
@@ -1,7 +1,7 @@
 
-export function checkedCheckboxesCount (element) {
+export function checkedInputsCount (element) {
   const formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations')
   const wrapperClass = formSettings.html_settings.wrapper_class
 
-  return element.closest(`.${wrapperClass.replace(/ /g, '.')}`).find('input[type="checkbox"]:checked').length
+  return element.closest(`.${wrapperClass.replace(/ /g, '.')}`).find('input:checked').length
 }
diff --git a/src/validator_overrides/index.js b/src/validator_overrides/index.js
index 31d0d9d..9e0f1c2 100644
--- a/src/validator_overrides/index.js
+++ b/src/validator_overrides/index.js
@@ -1,2 +1,23 @@
 import './length'
 import './presence'
+import $ from 'jquery'
+
+// main CSV enabler doesnt attach validation events to radio buttons.. I do it here
+// It could be fixed in main CSV if radio_buttons validations are needed there and
+// in that case we may removed it from here
+const originalInputEnabler = window.ClientSideValidations.enablers.input
+window.ClientSideValidations.enablers.input = function (input) {
+  originalInputEnabler(input)
+
+  const $input = $(input)
+  const form = input.form
+  const eventsToBind = window.ClientSideValidations.eventsToBind.input(form)
+
+  for (const eventName in eventsToBind) {
+    const eventFunction = eventsToBind[eventName]
+
+    $input.filter(':radio').each(function () {
+      return $(this).attr('data-validate', true)
+    }).on(eventName, eventFunction)
+  }
+}
diff --git a/src/validator_overrides/length.js b/src/validator_overrides/length.js
index 9f869b7..d19ea72 100644
--- a/src/validator_overrides/length.js
+++ b/src/validator_overrides/length.js
@@ -1,5 +1,5 @@
 import ClientSideValidations from '@client-side-validations/client-side-validations'
-import { checkedCheckboxesCount } from './helper'
+import { checkedInputsCount } from './helper'
 
 const originalLengthValidator = ClientSideValidations.validators.local.length
 
@@ -28,7 +28,7 @@ const runValidations = (valueLength, options) => {
 
 ClientSideValidations.validators.local.length = (element, options) => {
   if (element.attr('type') === 'checkbox') {
-    const count = checkedCheckboxesCount(element)
+    const count = checkedInputsCount(element)
     if (options.allow_blank && count === 0) {
       return
     }
diff --git a/src/validator_overrides/presence.js b/src/validator_overrides/presence.js
index e90f8a1..7f3675a 100644
--- a/src/validator_overrides/presence.js
+++ b/src/validator_overrides/presence.js
@@ -1,11 +1,11 @@
 import ClientSideValidations from '@client-side-validations/client-side-validations'
-import { checkedCheckboxesCount } from './helper'
+import { checkedInputsCount } from './helper'
 
 const originalPresenceValidator = ClientSideValidations.validators.local.presence
 
 ClientSideValidations.validators.local.presence = function (element, options) {
-  if (element.attr('type') === 'checkbox') {
-    if (checkedCheckboxesCount(element) === 0) {
+  if (element.attr('type') === 'checkbox' || element.attr('type') === 'radio') {
+    if (checkedInputsCount(element) === 0) {
       return options.message
     }
   } else {
diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
index d212ffd..d57e5fd 100644
--- a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
+++ b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
@@ -24,7 +24,8 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
         'user[role_ids]': {
           presence: [{ message: 'must be present' }],
           length:[{ messages: { maximum: 'is too long (maximum is 2 characters)' }, maximum: 2 }]
-        }
+        },
+        'user[department_id]': { presence: [{ message: 'must be present' }] },
       }
     }
 
@@ -78,7 +79,7 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                         type: 'checkbox',
                         'data-client-side-validations-wrapper': 'vertical_collection' }
                       ))
-                    .append('<label class="collection_check_boxes" for="user_roles_ids_1">Manager</label>')
+                    .append('<label class="collection_check_boxes" for="user_role_ids_1">Manager</label>')
                 )
                 .append(
                   $('<div>', { 'class': 'form-check' })
@@ -91,7 +92,7 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                         type: 'checkbox',
                         'data-client-side-validations-wrapper': 'vertical_collection' }
                       ))
-                    .append('<label class="collection_check_boxes" for="user_roles_ids_1">Technical support</label>')
+                    .append('<label class="collection_check_boxes" for="user_role_ids_2">Technical support</label>')
                 )
                 .append(
                   $('<div>', { 'class': 'form-check' })
@@ -104,9 +105,54 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                         type: 'checkbox',
                         'data-client-side-validations-wrapper': 'vertical_collection' }
                       ))
-                    .append('<label class="collection_check_boxes" for="user_roles_ids_1">Tester</label>')
+                    .append('<label class="collection_check_boxes" for="user_role_ids_3">Tester</label>')
+                )
+            )
+            .append(
+              $('<fieldset>', { 'class': 'form-group radio_buttons required user_department' })
+                .append(
+                  $('<legend class="col-form-label pt-0">Radio department <abbr title="required">*</abbr></legend>'))
+                .append(
+                  $('<input type="hidden" name="user[department_id]" value="">'))
+                .append(
+                  $('<div>', { 'class': 'form-check' })
+                    .append(
+                      $('<input />', {
+                        class: 'form-check-input radio_buttons required',
+                        name: 'user[department_id]',
+                        id: 'user_department_id_1',
+                        value: 1,
+                        type: 'radio',
+                        'data-client-side-validations-wrapper': 'vertical_collection' }
+                      ))
+                    .append('<label class="collection_check_boxes" for="user_department_id_1">IT</label>')
+                )
+                .append(
+                  $('<div>', { 'class': 'form-check' })
+                    .append(
+                      $('<input />', {
+                        class: 'form-check-input radio_buttons required',
+                        name: 'user[department_id]',
+                        id: 'user_department_id_2',
+                        value: 2,
+                        type: 'radio',
+                        'data-client-side-validations-wrapper': 'vertical_collection' }
+                      ))
+                    .append('<label class="collection_check_boxes" for="user_department_id_2">HR</label>')
+                )
+                .append(
+                  $('<div>', { 'class': 'form-check' })
+                    .append(
+                      $('<input />', {
+                        class: 'form-check-input radio_buttons required',
+                        name: 'user[department_id]',
+                        id: 'user_department_id_3',
+                        value: 3,
+                        type: 'radio',
+                        'data-client-side-validations-wrapper': 'vertical_collection' }
+                      ))
+                    .append('<label class="collection_check_boxes" for="user_department_id_3">PR</label>')
                 )
-
             )
         )
         .append(
@@ -134,7 +180,7 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                           type: 'checkbox',
                           'data-client-side-validations-wrapper': 'horizontal_collection' }
                         ))
-                      .append('<label class="collection_check_boxes" for="user_roles_ids_1">Manager</label>')
+                      .append('<label class="collection_check_boxes" for="user_role_ids_1">Manager</label>')
                   )
                   .append(
                     $('<div>', { 'class': 'form-check' })
@@ -147,7 +193,7 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                           type: 'checkbox',
                           'data-client-side-validations-wrapper': 'horizontal_collection' }
                         ))
-                      .append('<label class="collection_check_boxes" for="user_roles_ids_1">Technical support</label>')
+                      .append('<label class="collection_check_boxes" for="user_role_ids_2">Technical support</label>')
                   )
                   .append(
                     $('<div>', { 'class': 'form-check' })
@@ -160,11 +206,61 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                           type: 'checkbox',
                           'data-client-side-validations-wrapper': 'horizontal_collection' }
                         ))
-                      .append('<label class="collection_check_boxes" for="user_roles_ids_1">Tester</label>')
+                      .append('<label class="collection_check_boxes" for="user_role_ids_3">Tester</label>')
                   )
 
               )
-
+            )
+            .append(
+              $('<div>', { 'class': 'form-group row radio_buttons required user_department' })
+                .append(
+                  $('<label class="col-sm-3 col-form-label radio_buttons required">Radio department<abbr title="required">*</abbr></label>'))
+                .append($('<div>', { class: 'col-sm-9' })
+                  .append(
+                    $('<input type="hidden" name="user[department_ids]" value="">'))
+                  .append(
+                    $('<div>', { 'class': 'form-check' })
+                      .append(
+                        $('<input />', {
+                          class: 'form-check-input radio_buttons required',
+                          name: 'user[department_id]',
+                          id: 'user_department_id_1',
+                          value: 1,
+                          type: 'checkbox',
+                          'data-client-side-validations-wrapper': 'horizontal_collection',
+                          'data-validate': true }
+                        ))
+                      .append('<label class="collection_radio_buttons" for="user_department_id_1">IT</label>')
+                  )
+                  .append(
+                    $('<div>', { 'class': 'form-check' })
+                      .append(
+                        $('<input />', {
+                          class: 'form-check-input radio_buttons required',
+                          name: 'user[department_id]',
+                          id: 'user_department_id_2',
+                          value: 2,
+                          type: 'checkbox',
+                          'data-client-side-validations-wrapper': 'horizontal_collection',
+                          'data-validate': true }
+                        ))
+                      .append('<label class="collection_radio_buttons" for="user_department_id_2">HR</label>')
+                  )
+                  .append(
+                    $('<div>', { 'class': 'form-check' })
+                      .append(
+                        $('<input />', {
+                          class: 'form-check-input radio_buttons required',
+                          name: 'user[department_id]',
+                          id: 'user_department_id_3',
+                          value: 3,
+                          type: 'checkbox',
+                          'data-client-side-validations-wrapper': 'horizontal_collection',
+                          'data-validate': true }
+                        ))
+                      .append('<label class="collection_radio_buttons" for="user_department_id_3">PR</label>')
+                  )
+              )
             )
         )
 
@@ -296,6 +392,35 @@ for (var i = 0; i < wrappers.length; i++) {
     assert.ok(wrapperElement.find('.invalid-feedback').length === 1)
   })
 
+  QUnit.test(wrapper + ' - Validate associations radio_buttons', function (assert) {
+    var form = $('form#new_user_' +  wrapper)[0] || $('form#new_user_vertical_form')[0]
+    form.ClientSideValidations.settings.html_settings.wrapper = wrapper
+
+    form = $(form)
+
+    var wrapperElement = form.find('.form-group.user_department')
+    var radio1 = form.find('input#user_department_id_1')
+    var radio3 = form.find('input#user_department_id_3')
+
+    assert.ok(wrapperElement.find('div.invalid-feedback').length === 0)
+
+    radio1.trigger('change')
+    radio1.trigger('focusout')
 
+    assert.ok(wrapperElement.hasClass('form-group-invalid'))
+    assert.ok(radio1.hasClass('is-invalid'))
+    assert.ok(radio3.hasClass('is-invalid'))
+
+    assert.ok(radio3.closest('.form-check').next('.invalid-feedback').length === 1)
+    assert.ok(wrapperElement.find('div.invalid-feedback').length === 1)
+
+    radio1.attr('checked', true)
+    radio1.trigger('change')
+    radio1.trigger('focusout')
+
+    assert.notOk(wrapperElement.hasClass('form-group-invalid'))
+    assert.ok(wrapperElement.find('.is-invalid').length===0)
+    assert.ok(wrapperElement.find('.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 5aac686..a63c282 100644
--- a/test/simple_form/cases/test_form_helpers.rb
+++ b/test/simple_form/cases/test_form_helpers.rb
@@ -166,9 +166,9 @@ def test_habtm_association_field_validation_is_included_in_csv_hash
               'user[role_ids]' => {
                 length: [{
                   messages: {
-                    maximum: 'is too long (maximum is 99 characters)'
+                    maximum: 'is too long (maximum is 2 characters)'
                   },
-                  maximum:  99
+                  maximum:  2
                 }]
               }
             }
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
index 2605341..7c247bb 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
@@ -13,10 +13,10 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  function checkedCheckboxesCount(element) {
+  function checkedInputsCount(element) {
     var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
-    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input:checked').length;
   }
 
   var originalLengthValidator = ClientSideValidations.validators.local.length;
@@ -45,7 +45,7 @@
 
   ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var count = checkedCheckboxesCount(element);
+      var count = checkedInputsCount(element);
 
       if (options.allow_blank && count === 0) {
         return;
@@ -60,8 +60,8 @@
   var originalPresenceValidator = ClientSideValidations.validators.local.presence;
 
   ClientSideValidations.validators.local.presence = function (element, options) {
-    if (element.attr('type') === 'checkbox') {
-      if (checkedCheckboxesCount(element) === 0) {
+    if (element.attr('type') === 'checkbox' || element.attr('type') === 'radio') {
+      if (checkedInputsCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -69,6 +69,25 @@
     }
   };
 
+  // It could be fixed in main CSV if radio_buttons validations are needed there and
+  // in that case we may removed it from here
+
+  var originalInputEnabler = window.ClientSideValidations.enablers.input;
+
+  window.ClientSideValidations.enablers.input = function (input) {
+    originalInputEnabler(input);
+    var $input = $(input);
+    var form = input.form;
+    var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+
+    for (var eventName in eventsToBind) {
+      var eventFunction = eventsToBind[eventName];
+      $input.filter(':radio').each(function () {
+        return $(this).attr('data-validate', true);
+      }).on(eventName, eventFunction);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -124,6 +143,7 @@
               text: message
             });
             element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
+            element.closest('.form-check').parent().children('.form-check:last').after(errorElement);
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js
index bf0b822..f917d62 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.js
@@ -13,10 +13,10 @@
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
   ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations;
 
-  function checkedCheckboxesCount(element) {
+  function checkedInputsCount(element) {
     var formSettings = element.closest('form[data-client-side-validations]').data('clientSideValidations');
     var wrapperClass = formSettings.html_settings.wrapper_class;
-    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input[type="checkbox"]:checked').length;
+    return element.closest(".".concat(wrapperClass.replace(/ /g, '.'))).find('input:checked').length;
   }
 
   var originalLengthValidator = ClientSideValidations.validators.local.length;
@@ -45,7 +45,7 @@
 
   ClientSideValidations.validators.local.length = function (element, options) {
     if (element.attr('type') === 'checkbox') {
-      var count = checkedCheckboxesCount(element);
+      var count = checkedInputsCount(element);
 
       if (options.allow_blank && count === 0) {
         return;
@@ -60,8 +60,8 @@
   var originalPresenceValidator = ClientSideValidations.validators.local.presence;
 
   ClientSideValidations.validators.local.presence = function (element, options) {
-    if (element.attr('type') === 'checkbox') {
-      if (checkedCheckboxesCount(element) === 0) {
+    if (element.attr('type') === 'checkbox' || element.attr('type') === 'radio') {
+      if (checkedInputsCount(element) === 0) {
         return options.message;
       }
     } else {
@@ -69,6 +69,25 @@
     }
   };
 
+  // It could be fixed in main CSV if radio_buttons validations are needed there and
+  // in that case we may removed it from here
+
+  var originalInputEnabler = window.ClientSideValidations.enablers.input;
+
+  window.ClientSideValidations.enablers.input = function (input) {
+    originalInputEnabler(input);
+    var $input = $(input);
+    var form = input.form;
+    var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+
+    for (var eventName in eventsToBind) {
+      var eventFunction = eventsToBind[eventName];
+      $input.filter(':radio').each(function () {
+        return $(this).attr('data-validate', true);
+      }).on(eventName, eventFunction);
+    }
+  };
+
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
@@ -94,8 +113,8 @@
               text: message
             });
 
-            if (wrapper.hasClass('check_boxes')) {
-              element.closest('.checkbox').parent().children('.checkbox:last').after(errorElement);
+            if (wrapper.hasClass('check_boxes') || wrapper.hasClass('radio_buttons')) {
+              element.closest('.checkbox,.radio').parent().children('.checkbox:last, .radio:last').after(errorElement);
             } else {
               wrapper.append(errorElement);
             }

From aea987699626f72e37141eb3d5730405746640f2 Mon Sep 17 00:00:00 2001
From: Michal Remis <michal.remis@gmail.com>
Date: Sat, 2 May 2020 15:17:42 +0200
Subject: [PATCH 5/6] Fix checkboxes/radio revalidation

---
 dist/simple-form.bootstrap4.esm.js                    |  9 +++++++++
 dist/simple-form.bootstrap4.js                        |  9 +++++++++
 dist/simple-form.esm.js                               |  9 +++++++++
 dist/simple-form.js                                   |  9 +++++++++
 src/validator_overrides/index.js                      | 11 +++++++++++
 .../rails.validations.simple_form.bootstrap4.js       |  9 +++++++++
 .../javascripts/rails.validations.simple_form.js      |  9 +++++++++
 7 files changed, 65 insertions(+)

diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
index da8b292..d5be2e7 100644
--- a/dist/simple-form.bootstrap4.esm.js
+++ b/dist/simple-form.bootstrap4.esm.js
@@ -73,6 +73,7 @@ window.ClientSideValidations.enablers.input = function (input) {
   var $input = $(input);
   var form = input.form;
   var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+  var wrapperClass = form.ClientSideValidations.settings.html_settings.wrapper_class;
 
   for (var eventName in eventsToBind) {
     var eventFunction = eventsToBind[eventName];
@@ -80,6 +81,14 @@ window.ClientSideValidations.enablers.input = function (input) {
       return $(this).attr('data-validate', true);
     }).on(eventName, eventFunction);
   }
+
+  $input.filter(':radio').on('change.ClientSideValidations', function () {
+    $(this).isValid(form.ClientSideValidations.settings.validators);
+  }); // when we change radio/check mark also all sibling radios/checkboxes as changed to revalidate on submit
+
+  $input.filter(':radio,:checkbox').on('change.ClientSideValidations', function () {
+    $(this).closest(".".concat(wrapperClass.replace(/ /g, '.'))).find(':radio,:checkbox').data('changed', true);
+  });
 };
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js
index 7c247bb..a0a1f03 100644
--- a/dist/simple-form.bootstrap4.js
+++ b/dist/simple-form.bootstrap4.js
@@ -79,6 +79,7 @@
     var $input = $(input);
     var form = input.form;
     var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+    var wrapperClass = form.ClientSideValidations.settings.html_settings.wrapper_class;
 
     for (var eventName in eventsToBind) {
       var eventFunction = eventsToBind[eventName];
@@ -86,6 +87,14 @@
         return $(this).attr('data-validate', true);
       }).on(eventName, eventFunction);
     }
+
+    $input.filter(':radio').on('change.ClientSideValidations', function () {
+      $(this).isValid(form.ClientSideValidations.settings.validators);
+    }); // when we change radio/check mark also all sibling radios/checkboxes as changed to revalidate on submit
+
+    $input.filter(':radio,:checkbox').on('change.ClientSideValidations', function () {
+      $(this).closest(".".concat(wrapperClass.replace(/ /g, '.'))).find(':radio,:checkbox').data('changed', true);
+    });
   };
 
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js
index eafdb3a..089cc52 100644
--- a/dist/simple-form.esm.js
+++ b/dist/simple-form.esm.js
@@ -73,6 +73,7 @@ window.ClientSideValidations.enablers.input = function (input) {
   var $input = $(input);
   var form = input.form;
   var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+  var wrapperClass = form.ClientSideValidations.settings.html_settings.wrapper_class;
 
   for (var eventName in eventsToBind) {
     var eventFunction = eventsToBind[eventName];
@@ -80,6 +81,14 @@ window.ClientSideValidations.enablers.input = function (input) {
       return $(this).attr('data-validate', true);
     }).on(eventName, eventFunction);
   }
+
+  $input.filter(':radio').on('change.ClientSideValidations', function () {
+    $(this).isValid(form.ClientSideValidations.settings.validators);
+  }); // when we change radio/check mark also all sibling radios/checkboxes as changed to revalidate on submit
+
+  $input.filter(':radio,:checkbox').on('change.ClientSideValidations', function () {
+    $(this).closest(".".concat(wrapperClass.replace(/ /g, '.'))).find(':radio,:checkbox').data('changed', true);
+  });
 };
 
 ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
diff --git a/dist/simple-form.js b/dist/simple-form.js
index f917d62..45ae5c8 100644
--- a/dist/simple-form.js
+++ b/dist/simple-form.js
@@ -79,6 +79,7 @@
     var $input = $(input);
     var form = input.form;
     var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+    var wrapperClass = form.ClientSideValidations.settings.html_settings.wrapper_class;
 
     for (var eventName in eventsToBind) {
       var eventFunction = eventsToBind[eventName];
@@ -86,6 +87,14 @@
         return $(this).attr('data-validate', true);
       }).on(eventName, eventFunction);
     }
+
+    $input.filter(':radio').on('change.ClientSideValidations', function () {
+      $(this).isValid(form.ClientSideValidations.settings.validators);
+    }); // when we change radio/check mark also all sibling radios/checkboxes as changed to revalidate on submit
+
+    $input.filter(':radio,:checkbox').on('change.ClientSideValidations', function () {
+      $(this).closest(".".concat(wrapperClass.replace(/ /g, '.'))).find(':radio,:checkbox').data('changed', true);
+    });
   };
 
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
diff --git a/src/validator_overrides/index.js b/src/validator_overrides/index.js
index 9e0f1c2..28f8121 100644
--- a/src/validator_overrides/index.js
+++ b/src/validator_overrides/index.js
@@ -6,12 +6,14 @@ import $ from 'jquery'
 // It could be fixed in main CSV if radio_buttons validations are needed there and
 // in that case we may removed it from here
 const originalInputEnabler = window.ClientSideValidations.enablers.input
+
 window.ClientSideValidations.enablers.input = function (input) {
   originalInputEnabler(input)
 
   const $input = $(input)
   const form = input.form
   const eventsToBind = window.ClientSideValidations.eventsToBind.input(form)
+  const wrapperClass = form.ClientSideValidations.settings.html_settings.wrapper_class
 
   for (const eventName in eventsToBind) {
     const eventFunction = eventsToBind[eventName]
@@ -20,4 +22,13 @@ window.ClientSideValidations.enablers.input = function (input) {
       return $(this).attr('data-validate', true)
     }).on(eventName, eventFunction)
   }
+
+  $input.filter(':radio').on('change.ClientSideValidations', function () {
+    $(this).isValid(form.ClientSideValidations.settings.validators)
+  })
+
+  // when we change radio/check mark also all sibling radios/checkboxes as changed to revalidate on submit
+  $input.filter(':radio,:checkbox').on('change.ClientSideValidations', function () {
+    $(this).closest(`.${wrapperClass.replace(/ /g, '.')}`).find(':radio,:checkbox').data('changed', true)
+  })
 }
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
index 7c247bb..a0a1f03 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
@@ -79,6 +79,7 @@
     var $input = $(input);
     var form = input.form;
     var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+    var wrapperClass = form.ClientSideValidations.settings.html_settings.wrapper_class;
 
     for (var eventName in eventsToBind) {
       var eventFunction = eventsToBind[eventName];
@@ -86,6 +87,14 @@
         return $(this).attr('data-validate', true);
       }).on(eventName, eventFunction);
     }
+
+    $input.filter(':radio').on('change.ClientSideValidations', function () {
+      $(this).isValid(form.ClientSideValidations.settings.validators);
+    }); // when we change radio/check mark also all sibling radios/checkboxes as changed to revalidate on submit
+
+    $input.filter(':radio,:checkbox').on('change.ClientSideValidations', function () {
+      $(this).closest(".".concat(wrapperClass.replace(/ /g, '.'))).find(':radio,:checkbox').data('changed', true);
+    });
   };
 
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js
index f917d62..45ae5c8 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.js
@@ -79,6 +79,7 @@
     var $input = $(input);
     var form = input.form;
     var eventsToBind = window.ClientSideValidations.eventsToBind.input(form);
+    var wrapperClass = form.ClientSideValidations.settings.html_settings.wrapper_class;
 
     for (var eventName in eventsToBind) {
       var eventFunction = eventsToBind[eventName];
@@ -86,6 +87,14 @@
         return $(this).attr('data-validate', true);
       }).on(eventName, eventFunction);
     }
+
+    $input.filter(':radio').on('change.ClientSideValidations', function () {
+      $(this).isValid(form.ClientSideValidations.settings.validators);
+    }); // when we change radio/check mark also all sibling radios/checkboxes as changed to revalidate on submit
+
+    $input.filter(':radio,:checkbox').on('change.ClientSideValidations', function () {
+      $(this).closest(".".concat(wrapperClass.replace(/ /g, '.'))).find(':radio,:checkbox').data('changed', true);
+    });
   };
 
   ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {

From e707f925b49bdd384b511c11d0a8792d87404089 Mon Sep 17 00:00:00 2001
From: Michal Remis <michal.remis@gmail.com>
Date: Sat, 2 May 2020 23:42:07 +0200
Subject: [PATCH 6/6] refactor javascript getter

---
 dist/simple-form.bootstrap4.esm.js                       | 9 +++------
 dist/simple-form.bootstrap4.js                           | 9 +++------
 src/main.bootstrap4.js                                   | 9 +++++----
 .../rails.validations.simple_form.bootstrap4.js          | 9 +++------
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
index d5be2e7..1cc7dc9 100644
--- a/dist/simple-form.bootstrap4.esm.js
+++ b/dist/simple-form.bootstrap4.esm.js
@@ -91,7 +91,7 @@ window.ClientSideValidations.enablers.input = function (input) {
   });
 };
 
-ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+var simpleFormFormBuilder = {
   add: function add(element, settings, message) {
     this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
   },
@@ -130,11 +130,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         errorElement.remove();
       }
     },
-
-    get horizontal_collection() {
-      return this.vertical_collection;
-    },
-
     vertical_collection: {
       add: function add(element, settings, message) {
         var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
@@ -163,3 +158,5 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     }
   }
 };
+simpleFormFormBuilder.wrappers.horizontal_collection = simpleFormFormBuilder.wrappers.vertical_collection;
+ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder;
diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js
index a0a1f03..a5ae166 100644
--- a/dist/simple-form.bootstrap4.js
+++ b/dist/simple-form.bootstrap4.js
@@ -97,7 +97,7 @@
     });
   };
 
-  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+  var simpleFormFormBuilder = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
     },
@@ -136,11 +136,6 @@
           errorElement.remove();
         }
       },
-
-      get horizontal_collection() {
-        return this.vertical_collection;
-      },
-
       vertical_collection: {
         add: function add(element, settings, message) {
           var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
@@ -169,5 +164,7 @@
       }
     }
   };
+  simpleFormFormBuilder.wrappers.horizontal_collection = simpleFormFormBuilder.wrappers.vertical_collection;
+  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder;
 
 })));
diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js
index 0c6bc7d..4457c5c 100644
--- a/src/main.bootstrap4.js
+++ b/src/main.bootstrap4.js
@@ -2,7 +2,7 @@ import $ from 'jquery'
 import ClientSideValidations from '@client-side-validations/client-side-validations'
 import './validator_overrides/index'
 
-ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+const simpleFormFormBuilder = {
   add: function (element, settings, message) {
     this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message)
   },
@@ -41,9 +41,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         errorElement.remove()
       }
     },
-    get horizontal_collection () {
-      return this.vertical_collection
-    },
     vertical_collection: {
       add (element, settings, message) {
         const wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'))
@@ -71,3 +68,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
     }
   }
 }
+
+simpleFormFormBuilder.wrappers.horizontal_collection = simpleFormFormBuilder.wrappers.vertical_collection
+
+ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
index a0a1f03..a5ae166 100644
--- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
+++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
@@ -97,7 +97,7 @@
     });
   };
 
-  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
+  var simpleFormFormBuilder = {
     add: function add(element, settings, message) {
       this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message);
     },
@@ -136,11 +136,6 @@
           errorElement.remove();
         }
       },
-
-      get horizontal_collection() {
-        return this.vertical_collection;
-      },
-
       vertical_collection: {
         add: function add(element, settings, message) {
           var wrapperElement = element.closest('.' + settings.wrapper_class.replace(/ /g, '.'));
@@ -169,5 +164,7 @@
       }
     }
   };
+  simpleFormFormBuilder.wrappers.horizontal_collection = simpleFormFormBuilder.wrappers.vertical_collection;
+  ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder;
 
 })));