Merge pull request #116 from DavyJonesLocker/feature/insert-before-fo…

…rm-text Insert validation feedback before help text
DavyJonesLocker · Mar 26, 2021 · e3a4514 · e3a4514
2 parents e4de512 + c4000d3
commit e3a4514
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 ## main / unreleased
 
-* Add CSV 18.0 compatibility
+* [FEATURE] Insert validation feedback before help text [#116](https://github.com/DavyJonesLocker/client_side_validations-simple_form/pull/116) **POSSIBLE BREAKING CHANGE!**
+* [ENHANCEMENT] Test against jQuery 3.6.0 by default
 * [ENHANCEMENT] Update development dependencies
 
 ## 12.1.0 / 2020-02-13

diff --git a/dist/simple-form.bootstrap4.esm.js b/dist/simple-form.bootstrap4.esm.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations Simple Form JS (Default) - v0.1.3 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
+ * Client Side Validations Simple Form JS (Default) - v0.2.0 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
  * Copyright (c) 2021 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */
@@ -24,11 +24,17 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
 
         if (!errorElement.length) {
+          var formTextElement = wrapperElement.find('.form-text');
           errorElement = $('<' + settings.error_tag + '>', {
             "class": 'invalid-feedback',
             text: message
           });
-          wrapperElement.append(errorElement);
+
+          if (formTextElement.length) {
+            formTextElement.before(errorElement);
+          } else {
+            wrapperElement.append(errorElement);
+          }
         }
 
         wrapperElement.addClass(settings.wrapper_error_class);

diff --git a/dist/simple-form.bootstrap4.js b/dist/simple-form.bootstrap4.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations Simple Form JS (Bootstrap 4) - v0.1.3 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
+ * Client Side Validations Simple Form JS (Bootstrap 4) - v0.2.0 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
  * Copyright (c) 2021 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */
@@ -32,11 +32,17 @@
           var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
 
           if (!errorElement.length) {
+            var formTextElement = wrapperElement.find('.form-text');
             errorElement = $__default['default']('<' + settings.error_tag + '>', {
               "class": 'invalid-feedback',
               text: message
             });
-            wrapperElement.append(errorElement);
+
+            if (formTextElement.length) {
+              formTextElement.before(errorElement);
+            } else {
+              wrapperElement.append(errorElement);
+            }
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);

diff --git a/dist/simple-form.esm.js b/dist/simple-form.esm.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations Simple Form JS (Default) - v0.1.3 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
+ * Client Side Validations Simple Form JS (Default) - v0.2.0 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
  * Copyright (c) 2021 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */

diff --git a/dist/simple-form.js b/dist/simple-form.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations Simple Form JS (Default) - v0.1.3 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
+ * Client Side Validations Simple Form JS (Default) - v0.2.0 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
  * Copyright (c) 2021 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */

diff --git a/lib/client_side_validations/simple_form/version.rb b/lib/client_side_validations/simple_form/version.rb
@@ -2,6 +2,6 @@
 
 module ClientSideValidations
   module SimpleForm
-    VERSION = '12.1.0'
+    VERSION = '13.0.0'
   end
 end
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
       "/vendor/"
     ]
   },
-  "version": "0.1.3",
+  "version": "0.2.0",
   "directories": {
     "lib": "lib",
     "test": "test"

diff --git a/src/main.bootstrap4.js b/src/main.bootstrap4.js
@@ -19,8 +19,14 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
         let errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
 
         if (!errorElement.length) {
+          const formTextElement = wrapperElement.find('.form-text')
           errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback', text: message })
-          wrapperElement.append(errorElement)
+
+          if (formTextElement.length) {
+            formTextElement.before(errorElement)
+          } else {
+            wrapperElement.append(errorElement)
+          }
         }
 
         wrapperElement.addClass(settings.wrapper_error_class)

diff --git a/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js b/test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
@@ -20,7 +20,8 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
       },
       validators: {
         'user[name]': { presence: [{ message: 'must be present' }], format: [{ message: 'is invalid', 'with': { options: 'g', source: '\\d+' } }] },
-        'user[username]': { presence: [{ message: 'must be present' }] }
+        'user[username]': { presence: [{ message: 'must be present' }] },
+        'user[password]': { presence: [{ message: 'must be present' }] }
       }
     }
 
@@ -38,6 +39,14 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
                 $('<label for="user_name" class="string form-control-label">Name</label>'))
               .append(
                 $('<input />', { 'class': 'form-control', name: 'user[name]', id: 'user_name', type: 'text' })))
+          .append(
+            $('<div>', { 'class': 'form-group' })
+              .append(
+                $('<label for="user_password" class="string form-control-label">Password</label>'))
+              .append(
+                $('<input />', { 'class': 'form-control', name: 'user[password]', id: 'user_password', type: 'password' }))
+              .append(
+                $('<small />', { 'class': 'form-text text-muted', text: 'Minimum 8 characters' })))
           .append(
             $('<div>', { 'class': 'form-group' })
               .append(
@@ -116,4 +125,13 @@ 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 + ' - Inserts before form texts', function (assert) {
+    var form = $('form#new_user')
+    var input = form.find('input#user_password')
+    form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper
+
+    input.trigger('focusout')
+    assert.ok(input.parent().find('.invalid-feedback:contains("must be present") + .form-text')[0])
+  })
 }
diff --git a/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js b/vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations Simple Form JS (Bootstrap 4) - v0.1.3 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
+ * Client Side Validations Simple Form JS (Bootstrap 4) - v0.2.0 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
  * Copyright (c) 2021 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */
@@ -32,11 +32,17 @@
           var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
 
           if (!errorElement.length) {
+            var formTextElement = wrapperElement.find('.form-text');
             errorElement = $__default['default']('<' + settings.error_tag + '>', {
               "class": 'invalid-feedback',
               text: message
             });
-            wrapperElement.append(errorElement);
+
+            if (formTextElement.length) {
+              formTextElement.before(errorElement);
+            } else {
+              wrapperElement.append(errorElement);
+            }
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);

diff --git a/vendor/assets/javascripts/rails.validations.simple_form.js b/vendor/assets/javascripts/rails.validations.simple_form.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations Simple Form JS (Default) - v0.1.3 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
+ * Client Side Validations Simple Form JS (Default) - v0.2.0 (https://github.com/DavyJonesLocker/client_side_validations-simple_form)
  * Copyright (c) 2021 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */