From 53f6325808f8acb580e93403c20f07f7ed6d27d8 Mon Sep 17 00:00:00 2001 From: Michal Remis Date: Tue, 14 Apr 2020 16:35:34 +0200 Subject: [PATCH 1/5] 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($('')) + .append($('', { + 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 = %(
) + + 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 d9b70c91155885a718bc6f33330cd5deddfa13e4 Mon Sep 17 00:00:00 2001 From: Michal Remis Date: Mon, 27 Apr 2020 21:42:25 +0200 Subject: [PATCH 2/5] Add support for Date/Time inputs (bootstrap4) --- Gemfile | 2 + dist/simple-form.bootstrap4.esm.js | 40 +++++++++++++++++++ dist/simple-form.bootstrap4.js | 40 +++++++++++++++++++ dist/simple-form.esm.js | 40 +++++++++++++++++++ dist/simple-form.js | 40 +++++++++++++++++++ src/main.bootstrap4.js | 35 ++++++++++++++++ src/main.js | 34 ++++++++++++++++ ...ails.validations.simple_form.bootstrap4.js | 40 +++++++++++++++++++ .../rails.validations.simple_form.js | 40 +++++++++++++++++++ 9 files changed, 311 insertions(+) diff --git a/Gemfile b/Gemfile index 7f4f5e9..541a0f9 100644 --- a/Gemfile +++ b/Gemfile @@ -2,4 +2,6 @@ source 'https://rubygems.org' +gem 'client_side_validations', github: 'MichalRemis/client_side_validations', branch: 'SupportDateTimeSelects' + gemspec diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js index 2f2ca70..5ab3ec9 100644 --- a/dist/simple-form.bootstrap4.esm.js +++ b/dist/simple-form.bootstrap4.esm.js @@ -45,6 +45,46 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { element.removeClass('is-invalid'); errorElement.remove(); } + }, + + get horizontal_multi_select() { + return this.multi_select; + }, + + get vertical_multi_select() { + return this.multi_select; + }, + + multi_select: { + add: function add(element, settings, message) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var parentElement = element.parent(); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { + "class": 'invalid-feedback d-block', + text: message + }); + parentElement.after(errorElement); + } + + wrapperElement.addClass(settings.wrapper_error_class); + element.addClass('is-invalid'); + errorElement.text(message); + }, + remove: function remove(element, settings) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + var invalidSiblingExists = element.siblings('.is-invalid').length; + + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class); + errorElement.remove(); + } + + element.removeClass('is-invalid'); + } } } }; diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js index d934fa1..431ad3c 100644 --- a/dist/simple-form.bootstrap4.js +++ b/dist/simple-form.bootstrap4.js @@ -51,6 +51,46 @@ element.removeClass('is-invalid'); errorElement.remove(); } + }, + + get horizontal_multi_select() { + return this.multi_select; + }, + + get vertical_multi_select() { + return this.multi_select; + }, + + multi_select: { + add: function add(element, settings, message) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var parentElement = element.parent(); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { + "class": 'invalid-feedback d-block', + text: message + }); + parentElement.after(errorElement); + } + + wrapperElement.addClass(settings.wrapper_error_class); + element.addClass('is-invalid'); + errorElement.text(message); + }, + remove: function remove(element, settings) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + var invalidSiblingExists = element.siblings('.is-invalid').length; + + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class); + errorElement.remove(); + } + + element.removeClass('is-invalid'); + } } } }; diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js index 74ca450..79ee074 100644 --- a/dist/simple-form.esm.js +++ b/dist/simple-form.esm.js @@ -43,6 +43,46 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrapper.removeClass(settings.wrapper_error_class); return errorElement.remove(); } + }, + + get horizontal_multi_select() { + return this.multi_select; + }, + + get vertical_multi_select() { + return this.multi_select; + }, + + multi_select: { + add: function add(element, settings, message) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var parentElement = element.parent(); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { + "class": 'invalid-feedback d-block', + text: message + }); + parentElement.after(errorElement); + } + + wrapperElement.addClass(settings.wrapper_error_class); + element.addClass('is-invalid'); + errorElement.text(message); + }, + remove: function remove(element, settings) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + var invalidSiblingExists = element.siblings('.is-invalid').length; + + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class); + errorElement.remove(); + } + + element.removeClass('is-invalid'); + } } } }; diff --git a/dist/simple-form.js b/dist/simple-form.js index 62decb9..980273e 100644 --- a/dist/simple-form.js +++ b/dist/simple-form.js @@ -49,6 +49,46 @@ wrapper.removeClass(settings.wrapper_error_class); return errorElement.remove(); } + }, + + get horizontal_multi_select() { + return this.multi_select; + }, + + get vertical_multi_select() { + return this.multi_select; + }, + + multi_select: { + add: function add(element, settings, message) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var parentElement = element.parent(); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { + "class": 'invalid-feedback d-block', + text: message + }); + parentElement.after(errorElement); + } + + wrapperElement.addClass(settings.wrapper_error_class); + element.addClass('is-invalid'); + errorElement.text(message); + }, + remove: function remove(element, settings) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + var invalidSiblingExists = element.siblings('.is-invalid').length; + + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class); + errorElement.remove(); + } + + element.removeClass('is-invalid'); + } } } }; diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js index 6044c0e..7dc15e0 100644 --- a/src/main.bootstrap4.js +++ b/src/main.bootstrap4.js @@ -39,6 +39,41 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { element.removeClass('is-invalid') errorElement.remove() } + }, + get horizontal_multi_select () { + return this.multi_select + }, + get vertical_multi_select () { + return this.multi_select + }, + multi_select: { + add (element, settings, message) { + const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) + const parentElement = element.parent() + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback') + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message }) + parentElement.after(errorElement) + } + + wrapperElement.addClass(settings.wrapper_error_class) + element.addClass('is-invalid') + errorElement.text(message) + }, + remove (element, settings) { + const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) + const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback') + + const invalidSiblingExists = element.siblings('.is-invalid').length + + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class) + errorElement.remove() + } + + element.removeClass('is-invalid') + } } } } diff --git a/src/main.js b/src/main.js index b3e9bf7..832f12e 100644 --- a/src/main.js +++ b/src/main.js @@ -37,6 +37,40 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrapper.removeClass(settings.wrapper_error_class) return errorElement.remove() } + }, + get horizontal_multi_select () { + return this.multi_select + }, + get vertical_multi_select () { + return this.multi_select + }, + multi_select: { + add (element, settings, message) { + const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) + const parentElement = element.parent() + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback') + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message }) + parentElement.after(errorElement) + } + + wrapperElement.addClass(settings.wrapper_error_class) + element.addClass('is-invalid') + errorElement.text(message) + }, + remove (element, settings) { + const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) + const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback') + + const invalidSiblingExists = element.siblings('.is-invalid').length + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class) + errorElement.remove() + } + + element.removeClass('is-invalid') + } } } } diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js index d934fa1..431ad3c 100644 --- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js +++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js @@ -51,6 +51,46 @@ element.removeClass('is-invalid'); errorElement.remove(); } + }, + + get horizontal_multi_select() { + return this.multi_select; + }, + + get vertical_multi_select() { + return this.multi_select; + }, + + multi_select: { + add: function add(element, settings, message) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var parentElement = element.parent(); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { + "class": 'invalid-feedback d-block', + text: message + }); + parentElement.after(errorElement); + } + + wrapperElement.addClass(settings.wrapper_error_class); + element.addClass('is-invalid'); + errorElement.text(message); + }, + remove: function remove(element, settings) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + var invalidSiblingExists = element.siblings('.is-invalid').length; + + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class); + errorElement.remove(); + } + + element.removeClass('is-invalid'); + } } } }; diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js index 62decb9..980273e 100644 --- a/vendor/assets/javascripts/rails.validations.simple_form.js +++ b/vendor/assets/javascripts/rails.validations.simple_form.js @@ -49,6 +49,46 @@ wrapper.removeClass(settings.wrapper_error_class); return errorElement.remove(); } + }, + + get horizontal_multi_select() { + return this.multi_select; + }, + + get vertical_multi_select() { + return this.multi_select; + }, + + multi_select: { + add: function add(element, settings, message) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var parentElement = element.parent(); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + + if (!errorElement.length) { + errorElement = $('<' + settings.error_tag + '>', { + "class": 'invalid-feedback d-block', + text: message + }); + parentElement.after(errorElement); + } + + wrapperElement.addClass(settings.wrapper_error_class); + element.addClass('is-invalid'); + errorElement.text(message); + }, + remove: function remove(element, settings) { + var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); + var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); + var invalidSiblingExists = element.siblings('.is-invalid').length; + + if (!invalidSiblingExists) { + wrapperElement.removeClass(settings.wrapper_error_class); + errorElement.remove(); + } + + element.removeClass('is-invalid'); + } } } }; From 5dbb4d43bda6b746a23ac8ae02cac69568dc8e00 Mon Sep 17 00:00:00 2001 From: Michal Remis Date: Tue, 28 Apr 2020 01:26:14 +0200 Subject: [PATCH 3/5] Plain SimpleForm Date/Time WIP --- dist/simple-form.bootstrap4.esm.js | 1 + dist/simple-form.bootstrap4.js | 1 + dist/simple-form.esm.js | 15 +- dist/simple-form.js | 15 +- src/main.js | 10 +- .../test/form_builders/validateSimpleForm.js | 2 +- .../validateSimpleFormBootstrap4Datetime.js | 170 ++++++++++++++++++ .../validateSimpleFormDateTime.js | 152 ++++++++++++++++ ...ails.validations.simple_form.bootstrap4.js | 1 + .../rails.validations.simple_form.js | 15 +- 10 files changed, 348 insertions(+), 34 deletions(-) create mode 100644 test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js create mode 100644 test/javascript/public/test/form_builders/validateSimpleFormDateTime.js diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js index 5ab3ec9..4b28055 100644 --- a/dist/simple-form.bootstrap4.esm.js +++ b/dist/simple-form.bootstrap4.esm.js @@ -23,6 +23,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrappers: { "default": { add: function add(element, settings, message) { + alert('bla'); var wrapperElement = element.parent(); var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js index 431ad3c..feaf840 100644 --- a/dist/simple-form.bootstrap4.js +++ b/dist/simple-form.bootstrap4.js @@ -29,6 +29,7 @@ wrappers: { "default": { add: function add(element, settings, message) { + alert('bla'); var wrapperElement = element.parent(); var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js index 79ee074..8a1365d 100644 --- a/dist/simple-form.esm.js +++ b/dist/simple-form.esm.js @@ -23,6 +23,12 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrappers: { "default": { add: function add(element, settings, message) { + console.log(this); + + if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { + console.log(this); + } + var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')); @@ -44,15 +50,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { return errorElement.remove(); } }, - - get horizontal_multi_select() { - return this.multi_select; - }, - - get vertical_multi_select() { - return this.multi_select; - }, - multi_select: { add: function add(element, settings, message) { var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); diff --git a/dist/simple-form.js b/dist/simple-form.js index 980273e..42ad6b1 100644 --- a/dist/simple-form.js +++ b/dist/simple-form.js @@ -29,6 +29,12 @@ wrappers: { "default": { add: function add(element, settings, message) { + console.log(this); + + if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { + console.log(this); + } + var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')); @@ -50,15 +56,6 @@ return errorElement.remove(); } }, - - get horizontal_multi_select() { - return this.multi_select; - }, - - get vertical_multi_select() { - return this.multi_select; - }, - multi_select: { add: function add(element, settings, message) { var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); diff --git a/src/main.js b/src/main.js index 832f12e..8249555 100644 --- a/src/main.js +++ b/src/main.js @@ -18,6 +18,10 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrappers: { default: { add (element, settings, message) { + if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { + console.log(this.wrappers.multi_select.add(element, settings, message)) + } + const wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')) @@ -38,12 +42,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { return errorElement.remove() } }, - get horizontal_multi_select () { - return this.multi_select - }, - get vertical_multi_select () { - return this.multi_select - }, multi_select: { add (element, settings, message) { const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) diff --git a/test/javascript/public/test/form_builders/validateSimpleForm.js b/test/javascript/public/test/form_builders/validateSimpleForm.js index 3643175..4a324c8 100644 --- a/test/javascript/public/test/form_builders/validateSimpleForm.js +++ b/test/javascript/public/test/form_builders/validateSimpleForm.js @@ -12,7 +12,7 @@ QUnit.module('Validate SimpleForm', { dataCsv = { html_settings: { type: 'SimpleForm::FormBuilder', - error_class: 'error small', + error_class: 'error', error_tag: 'span', wrapper_error_class: 'field_with_errors', wrapper_tag: 'div', diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js new file mode 100644 index 0000000..29b8cfa --- /dev/null +++ b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js @@ -0,0 +1,170 @@ +QUnit.module('Validate SimpleForm Bootstrap 4 Datetime Fields/Wrappers', { + before: function () { + currentFormBuilder = window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] + window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = BS4_FORM_BUILDER + }, + + after: function () { + window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = currentFormBuilder + }, + + beforeEach: function () { + dataCsv = { + html_settings: { + type: 'SimpleForm::FormBuilder', + error_class: null, + error_tag: 'div', + wrapper_error_class: 'form-group-invalid', + wrapper_tag: 'div', + wrapper_class: 'form-group' + }, + validators: { + 'user[date_of_birth]': { presence: [{ message: 'must be present' }] }, + 'user[time_of_birth]': { presence: [{ message: 'must be present' }] } + } + } + + $('#qunit-fixture') + .append( + $('
', { + action: '/users', + 'data-client-side-validations': JSON.stringify(dataCsv), + method: 'post', + id: 'new_user' + }) + .append($('
', { + class:'form-group date required user_date_of_birth' + }) + .append($('')) + .append($('
', { + class: 'd-flex flex-row justify-content-between align-items-center' + }) + .append($('', { + id: 'user_date_of_birth_2i', + name: 'user[date_of_birth(2i)]', + class: 'form-control mx-1 date required', + 'data-client-side-validations-wrapper': 'vertical_multi_select' + }) + .append($('')) + .append($('')) + .append($(''))) + .append($('') + .append('') + .append('') + .append($('', { + id: 'user_time_of_birth_5i', + name: 'user[time_of_birth(5i)]', + class: 'form-control mx-1 is-invalid time required', + 'data-client-side-validations-wrapper': 'vertical_multi_select' + }) + .append($('')) + .append($('')) + .append($('')) + ) + ) + .append('
Time of birth must be present.
') + .append('Hint: At what time you were born?') + ) + ) + + $('form#new_user').validate() + } +}) + +//I don think this multiple wrapper names makes sense here, because in SimpleForm different wrapper would have different DOM +//but here DOM ($('#qunit-fixture')) is same for all tests. +var wrappers = ['vertical_form'] + +for (var i = 0; i < wrappers.length; i++) { + var wrapper = wrappers[i] + + QUnit.test(wrapper + ' - Validate date input', function (assert) { + const form = $('form#new_user'); + const select_year = form.find('select#user_date_of_birth_1i') + const select_month = form.find('select#user_date_of_birth_2i') + const select_day = form.find('select#user_date_of_birth_3i') + + form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper + + select_year.trigger('focusout') + select_day.trigger('focusout') + + assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_year.val(2025).trigger('change').trigger('focusout') + + assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_month.val(1).trigger('change').trigger('focusout') + select_day.val(1).trigger('change').trigger('focusout') + + assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0) + }) + + QUnit.test(wrapper + ' - Validate time input reusing server message', function (assert) { + const form = $('form#new_user'); + const select_hour = form.find('select#user_time_of_birth_4i') + const select_minute = form.find('select#user_time_of_birth_5i') + + form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper + + assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_hour.val(23).trigger('change').trigger('focusout') + + assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_minute.val(55).trigger('change').trigger('focusout') + + assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0) + }) +} diff --git a/test/javascript/public/test/form_builders/validateSimpleFormDateTime.js b/test/javascript/public/test/form_builders/validateSimpleFormDateTime.js new file mode 100644 index 0000000..f172069 --- /dev/null +++ b/test/javascript/public/test/form_builders/validateSimpleFormDateTime.js @@ -0,0 +1,152 @@ +QUnit.module('Validate SimpleForm DateTime', { + before: function () { + currentFormBuilder = window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] + window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = DEFAULT_FORM_BUILDER + }, + + after: function () { + window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = currentFormBuilder + }, + + beforeEach: function () { + dataCsv = { + 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' + }, + validators: { + 'user[date_of_birth]': { presence: [{ message: 'must be present' }] }, + 'user[time_of_birth]': { presence: [{ message: 'must be present' }] } + } + } + + $('#qunit-fixture') + .append( + $('', { + action: '/users', + 'data-client-side-validations': JSON.stringify(dataCsv), + method: 'post', + id: 'new_user' + }) + .append($('
', { + class:'input date required user_date_of_birth field_with_hint' + }) + .append($('')) + .append($('', { + id: 'user_date_of_birth_2i', + name: 'user[date_of_birth(2i)]', + class: 'date required', + }) + .append($('')) + .append($('')) + .append($(''))) + .append($('') + .append('') + .append('') + .append($('', { + id: 'user_time_of_birth_5i', + name: 'user[time_of_birth(5i)]', + class: 'time required', + 'aria-invalid': true + }) + .append($('')) + .append($('')) + .append($('')) + ) + .append('Hint: At what time you were born?') + .append('Time of birth must be present.') + ) + ) + + $('form#new_user').validate() + } + }) + + QUnit.test('Validate date input', function (assert) { + const form = $('form#new_user'); + const select_year = form.find('select#user_date_of_birth_1i') + const select_month = form.find('select#user_date_of_birth_2i') + const select_day = form.find('select#user_date_of_birth_3i') + + form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper + + select_year.trigger('focusout') + select_day.trigger('focusout') + + assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_year.val(2025).trigger('change').trigger('focusout') + + assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_month.val(1).trigger('change').trigger('focusout') + select_day.val(1).trigger('change').trigger('focusout') + + assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0) + }) + + QUnit.test('Validate time input reusing server message', function (assert) { + const form = $('form#new_user'); + const select_hour = form.find('select#user_time_of_birth_4i') + const select_minute = form.find('select#user_time_of_birth_5i') + + form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper + + assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_hour.val(23).trigger('change').trigger('focusout') + + assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_minute.val(55).trigger('change').trigger('focusout') + + assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0) + }) diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js index 431ad3c..feaf840 100644 --- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js +++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js @@ -29,6 +29,7 @@ wrappers: { "default": { add: function add(element, settings, message) { + alert('bla'); var wrapperElement = element.parent(); var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js index 980273e..42ad6b1 100644 --- a/vendor/assets/javascripts/rails.validations.simple_form.js +++ b/vendor/assets/javascripts/rails.validations.simple_form.js @@ -29,6 +29,12 @@ wrappers: { "default": { add: function add(element, settings, message) { + console.log(this); + + if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { + console.log(this); + } + var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')); @@ -50,15 +56,6 @@ return errorElement.remove(); } }, - - get horizontal_multi_select() { - return this.multi_select; - }, - - get vertical_multi_select() { - return this.multi_select; - }, - multi_select: { add: function add(element, settings, message) { var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); From d40e9ae13e863c48f39de3757e8165ceff192aea Mon Sep 17 00:00:00 2001 From: Michal Remis Date: Tue, 28 Apr 2020 15:09:05 +0200 Subject: [PATCH 4/5] RemovePlainSimpleForm --- dist/simple-form.bootstrap4.esm.js | 1 - dist/simple-form.bootstrap4.js | 1 - dist/simple-form.esm.js | 37 ---- dist/simple-form.js | 37 ---- src/main.js | 32 ---- .../validateSimpleFormBootstrap4.js | 134 +++++++++++++- .../validateSimpleFormBootstrap4Datetime.js | 170 ------------------ .../validateSimpleFormDateTime.js | 152 ---------------- ...ails.validations.simple_form.bootstrap4.js | 1 - .../rails.validations.simple_form.js | 37 ---- 10 files changed, 130 insertions(+), 472 deletions(-) delete mode 100644 test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js delete mode 100644 test/javascript/public/test/form_builders/validateSimpleFormDateTime.js diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js index 4b28055..5ab3ec9 100644 --- a/dist/simple-form.bootstrap4.esm.js +++ b/dist/simple-form.bootstrap4.esm.js @@ -23,7 +23,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrappers: { "default": { add: function add(element, settings, message) { - alert('bla'); var wrapperElement = element.parent(); var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js index feaf840..431ad3c 100644 --- a/dist/simple-form.bootstrap4.js +++ b/dist/simple-form.bootstrap4.js @@ -29,7 +29,6 @@ wrappers: { "default": { add: function add(element, settings, message) { - alert('bla'); var wrapperElement = element.parent(); var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js index 8a1365d..74ca450 100644 --- a/dist/simple-form.esm.js +++ b/dist/simple-form.esm.js @@ -23,12 +23,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrappers: { "default": { add: function add(element, settings, message) { - console.log(this); - - if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { - console.log(this); - } - var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')); @@ -49,37 +43,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrapper.removeClass(settings.wrapper_error_class); return errorElement.remove(); } - }, - multi_select: { - add: function add(element, settings, message) { - var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); - var parentElement = element.parent(); - var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); - - if (!errorElement.length) { - errorElement = $('<' + settings.error_tag + '>', { - "class": 'invalid-feedback d-block', - text: message - }); - parentElement.after(errorElement); - } - - wrapperElement.addClass(settings.wrapper_error_class); - element.addClass('is-invalid'); - errorElement.text(message); - }, - remove: function remove(element, settings) { - var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); - var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); - var invalidSiblingExists = element.siblings('.is-invalid').length; - - if (!invalidSiblingExists) { - wrapperElement.removeClass(settings.wrapper_error_class); - errorElement.remove(); - } - - element.removeClass('is-invalid'); - } } } }; diff --git a/dist/simple-form.js b/dist/simple-form.js index 42ad6b1..62decb9 100644 --- a/dist/simple-form.js +++ b/dist/simple-form.js @@ -29,12 +29,6 @@ wrappers: { "default": { add: function add(element, settings, message) { - console.log(this); - - if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { - console.log(this); - } - var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')); @@ -55,37 +49,6 @@ wrapper.removeClass(settings.wrapper_error_class); return errorElement.remove(); } - }, - multi_select: { - add: function add(element, settings, message) { - var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); - var parentElement = element.parent(); - var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); - - if (!errorElement.length) { - errorElement = $('<' + settings.error_tag + '>', { - "class": 'invalid-feedback d-block', - text: message - }); - parentElement.after(errorElement); - } - - wrapperElement.addClass(settings.wrapper_error_class); - element.addClass('is-invalid'); - errorElement.text(message); - }, - remove: function remove(element, settings) { - var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); - var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); - var invalidSiblingExists = element.siblings('.is-invalid').length; - - if (!invalidSiblingExists) { - wrapperElement.removeClass(settings.wrapper_error_class); - errorElement.remove(); - } - - element.removeClass('is-invalid'); - } } } }; diff --git a/src/main.js b/src/main.js index 8249555..b3e9bf7 100644 --- a/src/main.js +++ b/src/main.js @@ -18,10 +18,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrappers: { default: { add (element, settings, message) { - if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { - console.log(this.wrappers.multi_select.add(element, settings, message)) - } - const wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')) @@ -41,34 +37,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { wrapper.removeClass(settings.wrapper_error_class) return errorElement.remove() } - }, - multi_select: { - add (element, settings, message) { - const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) - const parentElement = element.parent() - var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback') - - if (!errorElement.length) { - errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message }) - parentElement.after(errorElement) - } - - wrapperElement.addClass(settings.wrapper_error_class) - element.addClass('is-invalid') - errorElement.text(message) - }, - remove (element, settings) { - const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) - const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback') - - const invalidSiblingExists = element.siblings('.is-invalid').length - if (!invalidSiblingExists) { - wrapperElement.removeClass(settings.wrapper_error_class) - errorElement.remove() - } - - element.removeClass('is-invalid') - } } } } diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js index 753e494..05adb4e 100644 --- a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js +++ b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js @@ -20,7 +20,9 @@ QUnit.module('Validate SimpleForm Bootstrap 4', { }, validators: { 'user[name]': { presence: [{ message: 'must be present' }], format: [{ message: 'is invalid', 'with': { options: 'g', source: '\\d+' } }] }, - 'user[username]': { presence: [{ message: 'must be present' }] } + 'user[username]': { presence: [{ message: 'must be present' }] }, + 'user[date_of_birth]': { presence: [{ message: 'must be present' }] }, + 'user[time_of_birth]': { presence: [{ message: 'must be present' }] } } } @@ -49,8 +51,81 @@ QUnit.module('Validate SimpleForm Bootstrap 4', { .append( $('', { 'class': 'input-group-text', text: '@' }))) .append( - $('', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' }))))) - + $('', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' })))) + .append($('
', { + class:'form-group date required user_date_of_birth' + }) + .append($('')) + .append($('
', { + class: 'd-flex flex-row justify-content-between align-items-center' + }) + .append($('', { + id: 'user_date_of_birth_2i', + name: 'user[date_of_birth(2i)]', + class: 'form-control mx-1 date required', + 'data-client-side-validations-wrapper': 'vertical_multi_select' + }) + .append($('')) + .append($('')) + .append($(''))) + .append($('') + .append('') + .append('') + .append($('', { + id: 'user_time_of_birth_5i', + name: 'user[time_of_birth(5i)]', + class: 'form-control mx-1 is-invalid time required', + 'data-client-side-validations-wrapper': 'vertical_multi_select' + }) + .append($('')) + .append($('')) + .append($('')) + ) + ) + .append('
Time of birth must be present.
') + .append('Hint: At what time you were born?') + ) + ) $('form#new_user').validate() } }) @@ -99,7 +174,7 @@ for (var i = 0; i < wrappers.length; i++) { assert.ok(input.parent().hasClass('form-group-invalid')) assert.ok(label.parent().hasClass('form-group-invalid')) assert.ok(input.parent().find('div.invalid-feedback:contains("is invalid")').length === 1) - assert.ok(form.find('div.invalid-feedback').length === 1) + assert.ok(input.closest('.form-group').find('div.invalid-feedback').length === 1) }) QUnit.test(wrapper + ' - Validate input-group', function (assert) { @@ -116,4 +191,55 @@ for (var i = 0; i < wrappers.length; i++) { input.trigger('focusout') assert.ok(input.closest('.input-group').find('div.invalid-feedback').length === 0) }) + + QUnit.test(wrapper + ' - Validate date input', function (assert) { + const form = $('form#new_user'); + const select_year = form.find('select#user_date_of_birth_1i') + const select_month = form.find('select#user_date_of_birth_2i') + const select_day = form.find('select#user_date_of_birth_3i') + + form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper + + select_year.trigger('focusout') + select_day.trigger('focusout') + + assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_year.val(2025).trigger('change').trigger('focusout') + + assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_month.val(1).trigger('change').trigger('focusout') + select_day.val(1).trigger('change').trigger('focusout') + + assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0) + }) + + QUnit.test(wrapper + ' - Validate time input reusing server message', function (assert) { + const form = $('form#new_user'); + const select_hour = form.find('select#user_time_of_birth_4i') + const select_minute = form.find('select#user_time_of_birth_5i') + + form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper + + assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_hour.val(23).trigger('change').trigger('focusout') + + assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) + + select_minute.val(55).trigger('change').trigger('focusout') + + assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid')) + assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0) + }) + } diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js deleted file mode 100644 index 29b8cfa..0000000 --- a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4Datetime.js +++ /dev/null @@ -1,170 +0,0 @@ -QUnit.module('Validate SimpleForm Bootstrap 4 Datetime Fields/Wrappers', { - before: function () { - currentFormBuilder = window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] - window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = BS4_FORM_BUILDER - }, - - after: function () { - window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = currentFormBuilder - }, - - beforeEach: function () { - dataCsv = { - html_settings: { - type: 'SimpleForm::FormBuilder', - error_class: null, - error_tag: 'div', - wrapper_error_class: 'form-group-invalid', - wrapper_tag: 'div', - wrapper_class: 'form-group' - }, - validators: { - 'user[date_of_birth]': { presence: [{ message: 'must be present' }] }, - 'user[time_of_birth]': { presence: [{ message: 'must be present' }] } - } - } - - $('#qunit-fixture') - .append( - $('', { - action: '/users', - 'data-client-side-validations': JSON.stringify(dataCsv), - method: 'post', - id: 'new_user' - }) - .append($('
', { - class:'form-group date required user_date_of_birth' - }) - .append($('')) - .append($('
', { - class: 'd-flex flex-row justify-content-between align-items-center' - }) - .append($('', { - id: 'user_date_of_birth_2i', - name: 'user[date_of_birth(2i)]', - class: 'form-control mx-1 date required', - 'data-client-side-validations-wrapper': 'vertical_multi_select' - }) - .append($('')) - .append($('')) - .append($(''))) - .append($('') - .append('') - .append('') - .append($('', { - id: 'user_time_of_birth_5i', - name: 'user[time_of_birth(5i)]', - class: 'form-control mx-1 is-invalid time required', - 'data-client-side-validations-wrapper': 'vertical_multi_select' - }) - .append($('')) - .append($('')) - .append($('')) - ) - ) - .append('
Time of birth must be present.
') - .append('Hint: At what time you were born?') - ) - ) - - $('form#new_user').validate() - } -}) - -//I don think this multiple wrapper names makes sense here, because in SimpleForm different wrapper would have different DOM -//but here DOM ($('#qunit-fixture')) is same for all tests. -var wrappers = ['vertical_form'] - -for (var i = 0; i < wrappers.length; i++) { - var wrapper = wrappers[i] - - QUnit.test(wrapper + ' - Validate date input', function (assert) { - const form = $('form#new_user'); - const select_year = form.find('select#user_date_of_birth_1i') - const select_month = form.find('select#user_date_of_birth_2i') - const select_day = form.find('select#user_date_of_birth_3i') - - form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper - - select_year.trigger('focusout') - select_day.trigger('focusout') - - assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_year.val(2025).trigger('change').trigger('focusout') - - assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_month.val(1).trigger('change').trigger('focusout') - select_day.val(1).trigger('change').trigger('focusout') - - assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0) - }) - - QUnit.test(wrapper + ' - Validate time input reusing server message', function (assert) { - const form = $('form#new_user'); - const select_hour = form.find('select#user_time_of_birth_4i') - const select_minute = form.find('select#user_time_of_birth_5i') - - form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper - - assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_hour.val(23).trigger('change').trigger('focusout') - - assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_minute.val(55).trigger('change').trigger('focusout') - - assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0) - }) -} diff --git a/test/javascript/public/test/form_builders/validateSimpleFormDateTime.js b/test/javascript/public/test/form_builders/validateSimpleFormDateTime.js deleted file mode 100644 index f172069..0000000 --- a/test/javascript/public/test/form_builders/validateSimpleFormDateTime.js +++ /dev/null @@ -1,152 +0,0 @@ -QUnit.module('Validate SimpleForm DateTime', { - before: function () { - currentFormBuilder = window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] - window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = DEFAULT_FORM_BUILDER - }, - - after: function () { - window.ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = currentFormBuilder - }, - - beforeEach: function () { - dataCsv = { - 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' - }, - validators: { - 'user[date_of_birth]': { presence: [{ message: 'must be present' }] }, - 'user[time_of_birth]': { presence: [{ message: 'must be present' }] } - } - } - - $('#qunit-fixture') - .append( - $('', { - action: '/users', - 'data-client-side-validations': JSON.stringify(dataCsv), - method: 'post', - id: 'new_user' - }) - .append($('
', { - class:'input date required user_date_of_birth field_with_hint' - }) - .append($('')) - .append($('', { - id: 'user_date_of_birth_2i', - name: 'user[date_of_birth(2i)]', - class: 'date required', - }) - .append($('')) - .append($('')) - .append($(''))) - .append($('') - .append('') - .append('') - .append($('', { - id: 'user_time_of_birth_5i', - name: 'user[time_of_birth(5i)]', - class: 'time required', - 'aria-invalid': true - }) - .append($('')) - .append($('')) - .append($('')) - ) - .append('Hint: At what time you were born?') - .append('Time of birth must be present.') - ) - ) - - $('form#new_user').validate() - } - }) - - QUnit.test('Validate date input', function (assert) { - const form = $('form#new_user'); - const select_year = form.find('select#user_date_of_birth_1i') - const select_month = form.find('select#user_date_of_birth_2i') - const select_day = form.find('select#user_date_of_birth_3i') - - form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper - - select_year.trigger('focusout') - select_day.trigger('focusout') - - assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_year.val(2025).trigger('change').trigger('focusout') - - assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_month.val(1).trigger('change').trigger('focusout') - select_day.val(1).trigger('change').trigger('focusout') - - assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0) - }) - - QUnit.test('Validate time input reusing server message', function (assert) { - const form = $('form#new_user'); - const select_hour = form.find('select#user_time_of_birth_4i') - const select_minute = form.find('select#user_time_of_birth_5i') - - form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper - - assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_hour.val(23).trigger('change').trigger('focusout') - - assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1) - - select_minute.val(55).trigger('change').trigger('focusout') - - assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid')) - assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0) - }) diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js index feaf840..431ad3c 100644 --- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js +++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js @@ -29,7 +29,6 @@ wrappers: { "default": { add: function add(element, settings, message) { - alert('bla'); var wrapperElement = element.parent(); var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js index 42ad6b1..62decb9 100644 --- a/vendor/assets/javascripts/rails.validations.simple_form.js +++ b/vendor/assets/javascripts/rails.validations.simple_form.js @@ -29,12 +29,6 @@ wrappers: { "default": { add: function add(element, settings, message) { - console.log(this); - - if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) { - console.log(this); - } - var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.')); @@ -55,37 +49,6 @@ wrapper.removeClass(settings.wrapper_error_class); return errorElement.remove(); } - }, - multi_select: { - add: function add(element, settings, message) { - var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); - var parentElement = element.parent(); - var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); - - if (!errorElement.length) { - errorElement = $('<' + settings.error_tag + '>', { - "class": 'invalid-feedback d-block', - text: message - }); - parentElement.after(errorElement); - } - - wrapperElement.addClass(settings.wrapper_error_class); - element.addClass('is-invalid'); - errorElement.text(message); - }, - remove: function remove(element, settings) { - var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); - var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback'); - var invalidSiblingExists = element.siblings('.is-invalid').length; - - if (!invalidSiblingExists) { - wrapperElement.removeClass(settings.wrapper_error_class); - errorElement.remove(); - } - - element.removeClass('is-invalid'); - } } } }; From 32112c1a374bb0f42daf6cb73385eb2e144dd944 Mon Sep 17 00:00:00 2001 From: Michal Remis Date: Fri, 1 May 2020 18:30:48 +0200 Subject: [PATCH 5/5] Refactored MultiSelect JS builder and fix test --- dist/simple-form.bootstrap4.esm.js | 14 ++++---------- dist/simple-form.bootstrap4.js | 14 ++++---------- src/main.bootstrap4.js | 13 ++++++------- .../test/form_builders/validateSimpleForm.js | 2 +- .../rails.validations.simple_form.bootstrap4.js | 14 ++++---------- 5 files changed, 19 insertions(+), 38 deletions(-) diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js index 5ab3ec9..a8aebb3 100644 --- a/dist/simple-form.bootstrap4.esm.js +++ b/dist/simple-form.bootstrap4.esm.js @@ -7,7 +7,7 @@ import $ from 'jquery'; import ClientSideValidations from '@client-side-validations/client-side-validations'; -ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { +var simpleFormFormBuilder = { add: function add(element, settings, message) { this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message); }, @@ -46,15 +46,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { errorElement.remove(); } }, - - get horizontal_multi_select() { - return this.multi_select; - }, - - get vertical_multi_select() { - return this.multi_select; - }, - multi_select: { add: function add(element, settings, message) { var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); @@ -88,3 +79,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { } } }; +simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select; +simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select; +ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder; diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js index 431ad3c..c84cb45 100644 --- a/dist/simple-form.bootstrap4.js +++ b/dist/simple-form.bootstrap4.js @@ -13,7 +13,7 @@ $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $; ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations; - ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { + var simpleFormFormBuilder = { add: function add(element, settings, message) { this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message); }, @@ -52,15 +52,6 @@ errorElement.remove(); } }, - - get horizontal_multi_select() { - return this.multi_select; - }, - - get vertical_multi_select() { - return this.multi_select; - }, - multi_select: { add: function add(element, settings, message) { var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); @@ -94,5 +85,8 @@ } } }; + simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select; + simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select; + ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder; }))); diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js index 7dc15e0..c7919ff 100644 --- a/src/main.bootstrap4.js +++ b/src/main.bootstrap4.js @@ -1,7 +1,7 @@ import $ from 'jquery' import ClientSideValidations from '@client-side-validations/client-side-validations' -ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { +const simpleFormFormBuilder = { add: function (element, settings, message) { this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message) }, @@ -40,12 +40,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { errorElement.remove() } }, - get horizontal_multi_select () { - return this.multi_select - }, - get vertical_multi_select () { - return this.multi_select - }, multi_select: { add (element, settings, message) { const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')) @@ -77,3 +71,8 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { } } } + +simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select +simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select + +ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder diff --git a/test/javascript/public/test/form_builders/validateSimpleForm.js b/test/javascript/public/test/form_builders/validateSimpleForm.js index 4a324c8..b463342 100644 --- a/test/javascript/public/test/form_builders/validateSimpleForm.js +++ b/test/javascript/public/test/form_builders/validateSimpleForm.js @@ -12,7 +12,7 @@ QUnit.module('Validate SimpleForm', { dataCsv = { html_settings: { type: 'SimpleForm::FormBuilder', - error_class: 'error', + error_class: 'error small', // 'small' class is present to test 399f389 error_tag: 'span', wrapper_error_class: 'field_with_errors', wrapper_tag: 'div', diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js index 431ad3c..c84cb45 100644 --- a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js +++ b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js @@ -13,7 +13,7 @@ $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $; ClientSideValidations = ClientSideValidations && Object.prototype.hasOwnProperty.call(ClientSideValidations, 'default') ? ClientSideValidations['default'] : ClientSideValidations; - ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = { + var simpleFormFormBuilder = { add: function add(element, settings, message) { this.wrapper(this.wrapperName(element, settings)).add.call(this, element, settings, message); }, @@ -52,15 +52,6 @@ errorElement.remove(); } }, - - get horizontal_multi_select() { - return this.multi_select; - }, - - get vertical_multi_select() { - return this.multi_select; - }, - multi_select: { add: function add(element, settings, message) { var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.')); @@ -94,5 +85,8 @@ } } }; + simpleFormFormBuilder.wrappers.horizontal_multi_select = simpleFormFormBuilder.wrappers.multi_select; + simpleFormFormBuilder.wrappers.vertical_multi_select = simpleFormFormBuilder.wrappers.multi_select; + ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = simpleFormFormBuilder; })));