Chore/use dataset for data (#965)

* Add `csv` prefix to CSV related data attributes Breaking change for a better transition to data attributes * Convert `csvValidate` to dataset * Move `csvChanged` to data attributes * Move `csvValid` to data attributes The example on the readme didn't change, because jQuery will parse "false" string and return a boolean ``` # html <div id="test-me" data-value="hello"></div> # js console.log($('#test-me').data('value')) # result false ``` * Fix specs
DavyJonesLocker · Dec 21, 2024 · 3e77c26 · 3e77c26
1 parent e2d95c8
commit 3e77c26
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 23.0.0 / unreleased
+
+* [FEATURE] Breaking change: Add `csv` prefix to CSV related data attributes:
+  - `data-changed` => `data-csv-changed`
+  - `data-valid` => `data-csv-valid`
+  - `data-validate` => `data-csv-validate`
+* [FEATURE] Use data attributes instead of `jQuery.data()`
+
 ## 22.3.0 / 2024-11-12
 
 * [FEATURE] Rails 8.0 compatibility

diff --git a/README.md b/README.md
@@ -461,7 +461,7 @@ Here is an example callback for sliding out the error message when the validatio
 window.ClientSideValidations.callbacks.element.fail = function($element, message, callback) {
   callback()
 
-  if ($element.data('valid') !== false) {
+  if ($element.data('csvValid') !== false) {
     $element.parent().find('.message').hide().show('slide', { direction: 'left', easing: 'easeOutBounce' }, 500)
   }
 }

diff --git a/dist/client-side-validations.esm.js b/dist/client-side-validations.esm.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations JS - v0.4.0 (https://github.com/DavyJonesLocker/client_side_validations)
+ * Client Side Validations JS - v0.5.0 (https://github.com/DavyJonesLocker/client_side_validations)
  * Copyright (c) 2024 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */
@@ -86,7 +86,7 @@ var ClientSideValidations = {
           jQuery(this).isValid(form.ClientSideValidations.settings.validators);
         },
         'change.ClientSideValidations': function changeClientSideValidations() {
-          jQuery(this).data('changed', true);
+          this.dataset.csvChanged = 'true';
         },
         'element:validate:after.ClientSideValidations': function elementValidateAfterClientSideValidations(eventData) {
           ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
@@ -111,10 +111,12 @@ var ClientSideValidations = {
     inputConfirmation: function inputConfirmation($element, form) {
       return {
         'focusout.ClientSideValidations': function focusoutClientSideValidations() {
-          $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+          $element[0].dataset.csvChanged = 'true';
+          $element.isValid(form.ClientSideValidations.settings.validators);
         },
         'keyup.ClientSideValidations': function keyupClientSideValidations() {
-          $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+          $element[0].dataset.csvChanged = 'true';
+          $element.isValid(form.ClientSideValidations.settings.validators);
         }
       };
     }
@@ -148,7 +150,7 @@ var ClientSideValidations = {
       for (var eventName in eventsToBind) {
         var eventFunction = eventsToBind[eventName];
         $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-          jQuery(this).attr('data-validate', true);
+          this.dataset.csvValidate = 'true';
         }).on(eventName, eventFunction);
       }
       $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -232,7 +234,7 @@ var ClientSideValidations = {
   },
   selectors: {
     inputs: ':input:not(button):not([type="submit"])[name]:visible:enabled',
-    validate_inputs: ':input:enabled:visible[data-validate]',
+    validate_inputs: ':input:enabled:visible[data-csv-validate]',
     forms: 'form[data-client-side-validations]'
   },
   validators: {
@@ -248,9 +250,10 @@ var ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'));
     } else {
-      $target.removeData(['changed', 'valid']);
+      delete $target[0].dataset.csvValid;
+      delete $target[0].dataset.csvChanged;
       $target.filter(':input').each(function () {
-        jQuery(this).removeAttr('data-validate');
+        delete this.dataset.csvValidate;
       });
     }
   },
@@ -628,13 +631,19 @@ var validateForm = function validateForm($form, validators) {
   return valid;
 };
 var passElement = function passElement($element) {
-  $element.trigger('element:validate:pass.ClientSideValidations').data('valid', null);
+  var element = $element[0];
+  $element.trigger('element:validate:pass.ClientSideValidations');
+  delete element.dataset.csvValid;
 };
 var failElement = function failElement($element, message) {
-  $element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false);
+  var element = $element[0];
+  $element.trigger('element:validate:fail.ClientSideValidations', message);
+  element.dataset.csvValid = 'false';
 };
 var afterValidate = function afterValidate($element) {
-  return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false;
+  var element = $element[0];
+  $element.trigger('element:validate:after.ClientSideValidations');
+  return element.dataset.csvValid !== 'false';
 };
 var executeValidator = function executeValidator(validatorFunctions, validatorFunction, validatorOptions, $element) {
   for (var validatorOption in validatorOptions) {
@@ -674,10 +683,10 @@ var isMarkedForDestroy = function isMarkedForDestroy($element) {
 };
 var executeAllValidators = function executeAllValidators($element, validators) {
   var element = $element[0];
-  if ($element.data('changed') === false || element.disabled) {
+  if (element.dataset.csvChanged === 'false' || element.disabled) {
     return;
   }
-  $element.data('changed', false);
+  element.dataset.csvChanged = 'false';
   if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
     passElement($element);
   }

diff --git a/dist/client-side-validations.js b/dist/client-side-validations.js
@@ -1,5 +1,5 @@
 /*!
- * Client Side Validations JS - v0.4.0 (https://github.com/DavyJonesLocker/client_side_validations)
+ * Client Side Validations JS - v0.5.0 (https://github.com/DavyJonesLocker/client_side_validations)
  * Copyright (c) 2024 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */
@@ -90,7 +90,7 @@
             jQuery(this).isValid(form.ClientSideValidations.settings.validators);
           },
           'change.ClientSideValidations': function changeClientSideValidations() {
-            jQuery(this).data('changed', true);
+            this.dataset.csvChanged = 'true';
           },
           'element:validate:after.ClientSideValidations': function elementValidateAfterClientSideValidations(eventData) {
             ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
@@ -115,10 +115,12 @@
       inputConfirmation: function inputConfirmation($element, form) {
         return {
           'focusout.ClientSideValidations': function focusoutClientSideValidations() {
-            $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+            $element[0].dataset.csvChanged = 'true';
+            $element.isValid(form.ClientSideValidations.settings.validators);
           },
           'keyup.ClientSideValidations': function keyupClientSideValidations() {
-            $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+            $element[0].dataset.csvChanged = 'true';
+            $element.isValid(form.ClientSideValidations.settings.validators);
           }
         };
       }
@@ -152,7 +154,7 @@
         for (var eventName in eventsToBind) {
           var eventFunction = eventsToBind[eventName];
           $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-            jQuery(this).attr('data-validate', true);
+            this.dataset.csvValidate = 'true';
           }).on(eventName, eventFunction);
         }
         $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -236,7 +238,7 @@
     },
     selectors: {
       inputs: ':input:not(button):not([type="submit"])[name]:visible:enabled',
-      validate_inputs: ':input:enabled:visible[data-validate]',
+      validate_inputs: ':input:enabled:visible[data-csv-validate]',
       forms: 'form[data-client-side-validations]'
     },
     validators: {
@@ -252,9 +254,10 @@
       if ($target.is('form')) {
         ClientSideValidations.disable($target.find(':input'));
       } else {
-        $target.removeData(['changed', 'valid']);
+        delete $target[0].dataset.csvValid;
+        delete $target[0].dataset.csvChanged;
         $target.filter(':input').each(function () {
-          jQuery(this).removeAttr('data-validate');
+          delete this.dataset.csvValidate;
         });
       }
     },
@@ -632,13 +635,19 @@
     return valid;
   };
   var passElement = function passElement($element) {
-    $element.trigger('element:validate:pass.ClientSideValidations').data('valid', null);
+    var element = $element[0];
+    $element.trigger('element:validate:pass.ClientSideValidations');
+    delete element.dataset.csvValid;
   };
   var failElement = function failElement($element, message) {
-    $element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false);
+    var element = $element[0];
+    $element.trigger('element:validate:fail.ClientSideValidations', message);
+    element.dataset.csvValid = 'false';
   };
   var afterValidate = function afterValidate($element) {
-    return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false;
+    var element = $element[0];
+    $element.trigger('element:validate:after.ClientSideValidations');
+    return element.dataset.csvValid !== 'false';
   };
   var executeValidator = function executeValidator(validatorFunctions, validatorFunction, validatorOptions, $element) {
     for (var validatorOption in validatorOptions) {
@@ -678,10 +687,10 @@
   };
   var executeAllValidators = function executeAllValidators($element, validators) {
     var element = $element[0];
-    if ($element.data('changed') === false || element.disabled) {
+    if (element.dataset.csvChanged === 'false' || element.disabled) {
       return;
     }
-    $element.data('changed', false);
+    element.dataset.csvChanged = 'false';
     if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
       passElement($element);
     }

diff --git a/lib/client_side_validations/version.rb b/lib/client_side_validations/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ClientSideValidations
-  VERSION = '22.3.0'
+  VERSION = '23.0.0'
 end
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
       "/vendor/"
     ]
   },
-  "version": "0.4.0",
+  "version": "0.5.0",
   "directories": {
     "lib": "lib",
     "test": "test"

diff --git a/src/core.js b/src/core.js
@@ -47,7 +47,7 @@ const ClientSideValidations = {
         jQuery(this).isValid(form.ClientSideValidations.settings.validators)
       },
       'change.ClientSideValidations': function () {
-        jQuery(this).data('changed', true)
+        this.dataset.csvChanged = 'true'
       },
       'element:validate:after.ClientSideValidations': function (eventData) {
         ClientSideValidations.callbacks.element.after(jQuery(this), eventData)
@@ -72,10 +72,12 @@ const ClientSideValidations = {
     }),
     inputConfirmation: ($element, form) => ({
       'focusout.ClientSideValidations': () => {
-        $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators)
+        $element[0].dataset.csvChanged = 'true'
+        $element.isValid(form.ClientSideValidations.settings.validators)
       },
       'keyup.ClientSideValidations': () => {
-        $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators)
+        $element[0].dataset.csvChanged = 'true'
+        $element.isValid(form.ClientSideValidations.settings.validators)
       }
     })
   },
@@ -115,7 +117,7 @@ const ClientSideValidations = {
         const eventFunction = eventsToBind[eventName]
 
         $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-          jQuery(this).attr('data-validate', true)
+          this.dataset.csvValidate = 'true'
         }).on(eventName, eventFunction)
       }
 
@@ -223,7 +225,7 @@ const ClientSideValidations = {
   },
   selectors: {
     inputs: ':input:not(button):not([type="submit"])[name]:visible:enabled',
-    validate_inputs: ':input:enabled:visible[data-validate]',
+    validate_inputs: ':input:enabled:visible[data-csv-validate]',
     forms: 'form[data-client-side-validations]'
   },
   validators: {
@@ -239,9 +241,10 @@ const ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'))
     } else {
-      $target.removeData(['changed', 'valid'])
+      delete $target[0].dataset.csvValid
+      delete $target[0].dataset.csvChanged
       $target.filter(':input').each(function () {
-        jQuery(this).removeAttr('data-validate')
+        delete this.dataset.csvValidate
       })
     }
   },

diff --git a/src/index.js b/src/index.js
@@ -125,15 +125,21 @@ const validateForm = ($form, validators) => {
 }
 
 const passElement = ($element) => {
-  $element.trigger('element:validate:pass.ClientSideValidations').data('valid', null)
+  const element = $element[0]
+  $element.trigger('element:validate:pass.ClientSideValidations')
+  delete element.dataset.csvValid
 }
 
 const failElement = ($element, message) => {
-  $element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false)
+  const element = $element[0]
+  $element.trigger('element:validate:fail.ClientSideValidations', message)
+  element.dataset.csvValid = 'false'
 }
 
 const afterValidate = ($element) => {
-  return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false
+  const element = $element[0]
+  $element.trigger('element:validate:after.ClientSideValidations')
+  return element.dataset.csvValid !== 'false'
 }
 
 const executeValidator = (validatorFunctions, validatorFunction, validatorOptions, $element) => {
@@ -185,11 +191,11 @@ const isMarkedForDestroy = ($element) => {
 
 const executeAllValidators = ($element, validators) => {
   const element = $element[0]
-  if ($element.data('changed') === false || element.disabled) {
+  if (element.dataset.csvChanged === 'false' || element.disabled) {
     return
   }
 
-  $element.data('changed', false)
+  element.dataset.csvChanged = 'false'
 
   if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
     passElement($element)

diff --git a/test/javascript/public/test/form_builders/validateForm.js b/test/javascript/public/test/form_builders/validateForm.js
@@ -65,8 +65,7 @@ QUnit.test('Validate form with an input changed to false (async)', function (ass
   var input = form.find('input#user_name')
 
   input.val('Test')
-  input.attr('changed', false)
-  input.attr('data-valid', true)
+  input[0].dataset.csvChanged = 'false'
 
   form.trigger('submit')
 

diff --git a/test/javascript/public/test/validateElement.js b/test/javascript/public/test/validateElement.js
@@ -491,7 +491,8 @@ QUnit.test('Return validation result', function (assert) {
 
   assert.notOk(input.isValid(dataCsv.validators))
 
-  input.val('123').data('changed', true)
+  input.val('123')
+  input[0].dataset.csvChanged = 'true'
   assert.ok(input.isValid(dataCsv.validators))
 })