From fb11038d1851ca2877a162389821596f15326fb8 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Sat, 2 May 2020 14:05:18 +0200 Subject: [PATCH] Fix removal of error messages The previous implementation was searching for `input_tag` classes on the label field wrapper, resulting in the element itself not being removed And the old label not being added. This commit fixes the wrong behavior --- CHANGELOG.md | 1 + dist/client-side-validations.esm.js | 7 ++++--- dist/client-side-validations.js | 7 ++++--- src/ClientSideValidations.js | 8 +++++--- test/javascript/public/test/validateElement.js | 7 ++++--- vendor/assets/javascripts/rails.validations.js | 7 ++++--- 6 files changed, 22 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2afb1ef15..4bf05f6e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * [FEATURE] Add support for many association validations ([#783](https://github.com/DavyJonesLocker/client_side_validations/pull/783)) * [BUGFIX] Fix Rails generators ([#786](https://github.com/DavyJonesLocker/client_side_validations/pull/786)) * [BUGFIX] Do not validate dynamically disabled inputs ([#789](https://github.com/DavyJonesLocker/client_side_validations/pull/789)) +* [BUGFIX] Fix removal of error messages ([#790](https://github.com/DavyJonesLocker/client_side_validations/pull/790)) ## 16.2.0 / 2020-04-10 diff --git a/dist/client-side-validations.esm.js b/dist/client-side-validations.esm.js index 7cd7a60a5..837450962 100644 --- a/dist/client-side-validations.esm.js +++ b/dist/client-side-validations.esm.js @@ -188,10 +188,11 @@ var ClientSideValidations = { }, remove: function remove(element, settings) { var form = $(element[0].form); - var errorFieldClass = $(settings.input_tag).attr('class'); - var inputErrorField = element.closest('.' + errorFieldClass.replace(/ /g, '.')); + var inputErrorFieldClass = $(settings.input_tag).attr('class'); + var inputErrorField = element.closest('.' + inputErrorFieldClass.replace(/ /g, '.')); var label = form.find("label[for='" + element.attr('id') + "']:not(.message)"); - var labelErrorField = label.closest('.' + errorFieldClass); + var labelErrorFieldClass = $(settings.label_tag).attr('class'); + var labelErrorField = label.closest('.' + labelErrorFieldClass.replace(/ /g, '.')); if (inputErrorField[0]) { inputErrorField.find('#' + element.attr('id')).detach(); diff --git a/dist/client-side-validations.js b/dist/client-side-validations.js index 94f5658dd..70ee0c0f1 100644 --- a/dist/client-side-validations.js +++ b/dist/client-side-validations.js @@ -194,10 +194,11 @@ }, remove: function remove(element, settings) { var form = $(element[0].form); - var errorFieldClass = $(settings.input_tag).attr('class'); - var inputErrorField = element.closest('.' + errorFieldClass.replace(/ /g, '.')); + var inputErrorFieldClass = $(settings.input_tag).attr('class'); + var inputErrorField = element.closest('.' + inputErrorFieldClass.replace(/ /g, '.')); var label = form.find("label[for='" + element.attr('id') + "']:not(.message)"); - var labelErrorField = label.closest('.' + errorFieldClass); + var labelErrorFieldClass = $(settings.label_tag).attr('class'); + var labelErrorField = label.closest('.' + labelErrorFieldClass.replace(/ /g, '.')); if (inputErrorField[0]) { inputErrorField.find('#' + element.attr('id')).detach(); diff --git a/src/ClientSideValidations.js b/src/ClientSideValidations.js index 538a1e60f..e5f7d566c 100644 --- a/src/ClientSideValidations.js +++ b/src/ClientSideValidations.js @@ -160,10 +160,12 @@ const ClientSideValidations = { }, remove: (element, settings) => { const form = $(element[0].form) - const errorFieldClass = $(settings.input_tag).attr('class') - const inputErrorField = element.closest('.' + (errorFieldClass.replace(/ /g, '.'))) + const inputErrorFieldClass = $(settings.input_tag).attr('class') + const inputErrorField = element.closest('.' + inputErrorFieldClass.replace(/ /g, '.')) const label = form.find("label[for='" + (element.attr('id')) + "']:not(.message)") - const labelErrorField = label.closest('.' + errorFieldClass) + + const labelErrorFieldClass = $(settings.label_tag).attr('class') + const labelErrorField = label.closest('.' + labelErrorFieldClass.replace(/ /g, '.')) if (inputErrorField[0]) { inputErrorField.find('#' + (element.attr('id'))).detach() diff --git a/test/javascript/public/test/validateElement.js b/test/javascript/public/test/validateElement.js index 431e643f9..9e7fa181f 100644 --- a/test/javascript/public/test/validateElement.js +++ b/test/javascript/public/test/validateElement.js @@ -429,12 +429,12 @@ QUnit.test("Don't validate dynamically disabled inputs", function (assert) { assert.notOk(input.parent().hasClass('field_with_errors')) }) -QUnit.test("Removes error messages when input tag has more than two css classes", function (assert) { +QUnit.test("Remove error messages when input tag has more than two css classes", function (assert) { dataCsv = { html_settings: { type: 'ActionView::Helpers::FormBuilder', - input_tag: '
', - label_tag: '
' + input_tag: '
', + label_tag: '
' }, validators: { 'user_2[name]': { presence: [{ message: 'must be present' }] } } } @@ -468,6 +468,7 @@ QUnit.test("Removes error messages when input tag has more than two css classes" input.trigger('focusout') assert.notOk(input.parent().hasClass('field_with_errors')) + assert.notOk(form.find('.field_with_errors').length) }) QUnit.test('ensure label is scoped to form', function (assert) { diff --git a/vendor/assets/javascripts/rails.validations.js b/vendor/assets/javascripts/rails.validations.js index 94f5658dd..70ee0c0f1 100644 --- a/vendor/assets/javascripts/rails.validations.js +++ b/vendor/assets/javascripts/rails.validations.js @@ -194,10 +194,11 @@ }, remove: function remove(element, settings) { var form = $(element[0].form); - var errorFieldClass = $(settings.input_tag).attr('class'); - var inputErrorField = element.closest('.' + errorFieldClass.replace(/ /g, '.')); + var inputErrorFieldClass = $(settings.input_tag).attr('class'); + var inputErrorField = element.closest('.' + inputErrorFieldClass.replace(/ /g, '.')); var label = form.find("label[for='" + element.attr('id') + "']:not(.message)"); - var labelErrorField = label.closest('.' + errorFieldClass); + var labelErrorFieldClass = $(settings.label_tag).attr('class'); + var labelErrorField = label.closest('.' + labelErrorFieldClass.replace(/ /g, '.')); if (inputErrorField[0]) { inputErrorField.find('#' + element.attr('id')).detach();