From 399690718c43de46e7146ebb622ded9fbc5e9a2c Mon Sep 17 00:00:00 2001 From: Michal Remis Date: Tue, 14 Apr 2020 16:35:34 +0200 Subject: [PATCH] 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) {