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

@@ -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
 

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();

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();

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()

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: '<div class="class_one class_two field_with_errors"><span id="input_tag"></span><label for="user_name" class="message"></label></div>',
-      label_tag: '<div class="field_with_errors"><label id="label_tag"></label></div>'
+      input_tag: '<div class="input_class_one input_class_two field_with_errors"><span id="input_tag"></span><label for="user_name" class="message"></label></div>',
+      label_tag: '<div class="label_class_one label_class_two field_with_errors"><label id="label_tag"></label></div>'
     },
     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) {

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();