From 01e63428bf353f82f58fcbd1bd935e819564085f Mon Sep 17 00:00:00 2001
From: Geremia Taglialatela <tagliala.dev@gmail.com>
Date: Sun, 15 Dec 2024 22:32:07 +0100
Subject: [PATCH 1/5] Add `csv` prefix to CSV related data attributes

Breaking change for a better transition to data attributes
---
 CHANGELOG.md                                  |  7 +++++
 README.md                                     |  2 +-
 dist/client-side-validations.esm.js           | 26 +++++++++----------
 dist/client-side-validations.js               | 26 +++++++++----------
 lib/client_side_validations/version.rb        |  2 +-
 package.json                                  |  2 +-
 src/core.js                                   | 14 +++++-----
 src/index.js                                  | 10 +++----
 .../public/test/form_builders/validateForm.js |  2 +-
 .../javascript/public/test/validateElement.js |  2 +-
 .../assets/javascripts/rails.validations.js   | 26 +++++++++----------
 11 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99f64d17c..6569b415c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # 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`
+
 ## 22.3.0 / 2024-11-12
 
 * [FEATURE] Rails 8.0 compatibility
diff --git a/README.md b/README.md
index 3ac4b6b65..dfbe14448 100644
--- 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
index 628433d8d..f75627efa 100644
--- 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);
+          jQuery(this).data('csvChanged', true);
         },
         'element:validate:after.ClientSideValidations': function elementValidateAfterClientSideValidations(eventData) {
           ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
@@ -111,10 +111,10 @@ var ClientSideValidations = {
     inputConfirmation: function inputConfirmation($element, form) {
       return {
         'focusout.ClientSideValidations': function focusoutClientSideValidations() {
-          $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+          $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
         },
         'keyup.ClientSideValidations': function keyupClientSideValidations() {
-          $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+          $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
         }
       };
     }
@@ -148,7 +148,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);
+          jQuery(this).attr('data-csv-validate', true);
         }).on(eventName, eventFunction);
       }
       $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -232,7 +232,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 +248,9 @@ var ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'));
     } else {
-      $target.removeData(['changed', 'valid']);
+      $target.removeData(['csvChanged', 'csvValid']);
       $target.filter(':input').each(function () {
-        jQuery(this).removeAttr('data-validate');
+        jQuery(this).removeAttr('data-csv-validate');
       });
     }
   },
@@ -628,13 +628,13 @@ var validateForm = function validateForm($form, validators) {
   return valid;
 };
 var passElement = function passElement($element) {
-  $element.trigger('element:validate:pass.ClientSideValidations').data('valid', null);
+  $element.trigger('element:validate:pass.ClientSideValidations').data('csvValid', null);
 };
 var failElement = function failElement($element, message) {
-  $element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false);
+  $element.trigger('element:validate:fail.ClientSideValidations', message).data('csvValid', false);
 };
 var afterValidate = function afterValidate($element) {
-  return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false;
+  return $element.trigger('element:validate:after.ClientSideValidations').data('csvValid') !== false;
 };
 var executeValidator = function executeValidator(validatorFunctions, validatorFunction, validatorOptions, $element) {
   for (var validatorOption in validatorOptions) {
@@ -674,10 +674,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.data('csvChanged') === false || element.disabled) {
     return;
   }
-  $element.data('changed', false);
+  $element.data('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
index c7c21d793..a8bea358a 100644
--- 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);
+            jQuery(this).data('csvChanged', true);
           },
           'element:validate:after.ClientSideValidations': function elementValidateAfterClientSideValidations(eventData) {
             ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
@@ -115,10 +115,10 @@
       inputConfirmation: function inputConfirmation($element, form) {
         return {
           'focusout.ClientSideValidations': function focusoutClientSideValidations() {
-            $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+            $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
           },
           'keyup.ClientSideValidations': function keyupClientSideValidations() {
-            $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+            $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
           }
         };
       }
@@ -152,7 +152,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);
+            jQuery(this).attr('data-csv-validate', true);
           }).on(eventName, eventFunction);
         }
         $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -236,7 +236,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 +252,9 @@
       if ($target.is('form')) {
         ClientSideValidations.disable($target.find(':input'));
       } else {
-        $target.removeData(['changed', 'valid']);
+        $target.removeData(['csvChanged', 'csvValid']);
         $target.filter(':input').each(function () {
-          jQuery(this).removeAttr('data-validate');
+          jQuery(this).removeAttr('data-csv-validate');
         });
       }
     },
@@ -632,13 +632,13 @@
     return valid;
   };
   var passElement = function passElement($element) {
-    $element.trigger('element:validate:pass.ClientSideValidations').data('valid', null);
+    $element.trigger('element:validate:pass.ClientSideValidations').data('csvValid', null);
   };
   var failElement = function failElement($element, message) {
-    $element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false);
+    $element.trigger('element:validate:fail.ClientSideValidations', message).data('csvValid', false);
   };
   var afterValidate = function afterValidate($element) {
-    return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false;
+    return $element.trigger('element:validate:after.ClientSideValidations').data('csvValid') !== false;
   };
   var executeValidator = function executeValidator(validatorFunctions, validatorFunction, validatorOptions, $element) {
     for (var validatorOption in validatorOptions) {
@@ -678,10 +678,10 @@
   };
   var executeAllValidators = function executeAllValidators($element, validators) {
     var element = $element[0];
-    if ($element.data('changed') === false || element.disabled) {
+    if ($element.data('csvChanged') === false || element.disabled) {
       return;
     }
-    $element.data('changed', false);
+    $element.data('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
index f6285b824..01271f493 100644
--- 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
index 63b88f5d5..c29c50ff0 100644
--- 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
index 47089563b..f3095196f 100644
--- 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)
+        jQuery(this).data('csvChanged', true)
       },
       'element:validate:after.ClientSideValidations': function (eventData) {
         ClientSideValidations.callbacks.element.after(jQuery(this), eventData)
@@ -72,10 +72,10 @@ const ClientSideValidations = {
     }),
     inputConfirmation: ($element, form) => ({
       'focusout.ClientSideValidations': () => {
-        $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators)
+        $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators)
       },
       'keyup.ClientSideValidations': () => {
-        $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators)
+        $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators)
       }
     })
   },
@@ -115,7 +115,7 @@ const ClientSideValidations = {
         const eventFunction = eventsToBind[eventName]
 
         $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-          jQuery(this).attr('data-validate', true)
+          jQuery(this).attr('data-csv-validate', true)
         }).on(eventName, eventFunction)
       }
 
@@ -223,7 +223,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 +239,9 @@ const ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'))
     } else {
-      $target.removeData(['changed', 'valid'])
+      $target.removeData(['csvChanged', 'csvValid'])
       $target.filter(':input').each(function () {
-        jQuery(this).removeAttr('data-validate')
+        jQuery(this).removeAttr('data-csv-validate')
       })
     }
   },
diff --git a/src/index.js b/src/index.js
index fe99561db..db0f3f404 100644
--- a/src/index.js
+++ b/src/index.js
@@ -125,15 +125,15 @@ const validateForm = ($form, validators) => {
 }
 
 const passElement = ($element) => {
-  $element.trigger('element:validate:pass.ClientSideValidations').data('valid', null)
+  $element.trigger('element:validate:pass.ClientSideValidations').data('csvValid', null)
 }
 
 const failElement = ($element, message) => {
-  $element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false)
+  $element.trigger('element:validate:fail.ClientSideValidations', message).data('csvValid', false)
 }
 
 const afterValidate = ($element) => {
-  return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false
+  return $element.trigger('element:validate:after.ClientSideValidations').data('csvValid') !== false
 }
 
 const executeValidator = (validatorFunctions, validatorFunction, validatorOptions, $element) => {
@@ -185,11 +185,11 @@ const isMarkedForDestroy = ($element) => {
 
 const executeAllValidators = ($element, validators) => {
   const element = $element[0]
-  if ($element.data('changed') === false || element.disabled) {
+  if ($element.data('csvChanged') === false || element.disabled) {
     return
   }
 
-  $element.data('changed', false)
+  $element.data('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
index a9842f6f8..2165e84a8 100644
--- a/test/javascript/public/test/form_builders/validateForm.js
+++ b/test/javascript/public/test/form_builders/validateForm.js
@@ -65,7 +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('csvChanged', false)
   input.attr('data-valid', true)
 
   form.trigger('submit')
diff --git a/test/javascript/public/test/validateElement.js b/test/javascript/public/test/validateElement.js
index 9e7fa181f..dd47e66c5 100644
--- a/test/javascript/public/test/validateElement.js
+++ b/test/javascript/public/test/validateElement.js
@@ -491,7 +491,7 @@ QUnit.test('Return validation result', function (assert) {
 
   assert.notOk(input.isValid(dataCsv.validators))
 
-  input.val('123').data('changed', true)
+  input.val('123').data('csvChanged', true)
   assert.ok(input.isValid(dataCsv.validators))
 })
 
diff --git a/vendor/assets/javascripts/rails.validations.js b/vendor/assets/javascripts/rails.validations.js
index c7c21d793..a8bea358a 100644
--- a/vendor/assets/javascripts/rails.validations.js
+++ b/vendor/assets/javascripts/rails.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);
+            jQuery(this).data('csvChanged', true);
           },
           'element:validate:after.ClientSideValidations': function elementValidateAfterClientSideValidations(eventData) {
             ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
@@ -115,10 +115,10 @@
       inputConfirmation: function inputConfirmation($element, form) {
         return {
           'focusout.ClientSideValidations': function focusoutClientSideValidations() {
-            $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+            $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
           },
           'keyup.ClientSideValidations': function keyupClientSideValidations() {
-            $element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
+            $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
           }
         };
       }
@@ -152,7 +152,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);
+            jQuery(this).attr('data-csv-validate', true);
           }).on(eventName, eventFunction);
         }
         $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -236,7 +236,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 +252,9 @@
       if ($target.is('form')) {
         ClientSideValidations.disable($target.find(':input'));
       } else {
-        $target.removeData(['changed', 'valid']);
+        $target.removeData(['csvChanged', 'csvValid']);
         $target.filter(':input').each(function () {
-          jQuery(this).removeAttr('data-validate');
+          jQuery(this).removeAttr('data-csv-validate');
         });
       }
     },
@@ -632,13 +632,13 @@
     return valid;
   };
   var passElement = function passElement($element) {
-    $element.trigger('element:validate:pass.ClientSideValidations').data('valid', null);
+    $element.trigger('element:validate:pass.ClientSideValidations').data('csvValid', null);
   };
   var failElement = function failElement($element, message) {
-    $element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false);
+    $element.trigger('element:validate:fail.ClientSideValidations', message).data('csvValid', false);
   };
   var afterValidate = function afterValidate($element) {
-    return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false;
+    return $element.trigger('element:validate:after.ClientSideValidations').data('csvValid') !== false;
   };
   var executeValidator = function executeValidator(validatorFunctions, validatorFunction, validatorOptions, $element) {
     for (var validatorOption in validatorOptions) {
@@ -678,10 +678,10 @@
   };
   var executeAllValidators = function executeAllValidators($element, validators) {
     var element = $element[0];
-    if ($element.data('changed') === false || element.disabled) {
+    if ($element.data('csvChanged') === false || element.disabled) {
       return;
     }
-    $element.data('changed', false);
+    $element.data('csvChanged', false);
     if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
       passElement($element);
     }

From 3c2a1df7be744c6324b852d9e3005ab609428671 Mon Sep 17 00:00:00 2001
From: Geremia Taglialatela <tagliala.dev@gmail.com>
Date: Sun, 15 Dec 2024 22:33:12 +0100
Subject: [PATCH 2/5] Convert `csvValidate` to dataset

---
 dist/client-side-validations.esm.js            | 4 ++--
 dist/client-side-validations.js                | 4 ++--
 src/core.js                                    | 4 ++--
 vendor/assets/javascripts/rails.validations.js | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/dist/client-side-validations.esm.js b/dist/client-side-validations.esm.js
index f75627efa..265c03dd9 100644
--- a/dist/client-side-validations.esm.js
+++ b/dist/client-side-validations.esm.js
@@ -148,7 +148,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-csv-validate', true);
+          this.dataset.csvValidate = 'true';
         }).on(eventName, eventFunction);
       }
       $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -250,7 +250,7 @@ var ClientSideValidations = {
     } else {
       $target.removeData(['csvChanged', 'csvValid']);
       $target.filter(':input').each(function () {
-        jQuery(this).removeAttr('data-csv-validate');
+        delete this.dataset.csvValidate;
       });
     }
   },
diff --git a/dist/client-side-validations.js b/dist/client-side-validations.js
index a8bea358a..0983fdecb 100644
--- a/dist/client-side-validations.js
+++ b/dist/client-side-validations.js
@@ -152,7 +152,7 @@
         for (var eventName in eventsToBind) {
           var eventFunction = eventsToBind[eventName];
           $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-            jQuery(this).attr('data-csv-validate', true);
+            this.dataset.csvValidate = 'true';
           }).on(eventName, eventFunction);
         }
         $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -254,7 +254,7 @@
       } else {
         $target.removeData(['csvChanged', 'csvValid']);
         $target.filter(':input').each(function () {
-          jQuery(this).removeAttr('data-csv-validate');
+          delete this.dataset.csvValidate;
         });
       }
     },
diff --git a/src/core.js b/src/core.js
index f3095196f..669b16503 100644
--- a/src/core.js
+++ b/src/core.js
@@ -115,7 +115,7 @@ const ClientSideValidations = {
         const eventFunction = eventsToBind[eventName]
 
         $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-          jQuery(this).attr('data-csv-validate', true)
+          this.dataset.csvValidate = 'true'
         }).on(eventName, eventFunction)
       }
 
@@ -241,7 +241,7 @@ const ClientSideValidations = {
     } else {
       $target.removeData(['csvChanged', 'csvValid'])
       $target.filter(':input').each(function () {
-        jQuery(this).removeAttr('data-csv-validate')
+        delete this.dataset.csvValidate
       })
     }
   },
diff --git a/vendor/assets/javascripts/rails.validations.js b/vendor/assets/javascripts/rails.validations.js
index a8bea358a..0983fdecb 100644
--- a/vendor/assets/javascripts/rails.validations.js
+++ b/vendor/assets/javascripts/rails.validations.js
@@ -152,7 +152,7 @@
         for (var eventName in eventsToBind) {
           var eventFunction = eventsToBind[eventName];
           $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-            jQuery(this).attr('data-csv-validate', true);
+            this.dataset.csvValidate = 'true';
           }).on(eventName, eventFunction);
         }
         $input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -254,7 +254,7 @@
       } else {
         $target.removeData(['csvChanged', 'csvValid']);
         $target.filter(':input').each(function () {
-          jQuery(this).removeAttr('data-csv-validate');
+          delete this.dataset.csvValidate;
         });
       }
     },

From 1f1fecbcbd67e40439f13d41b4673082708ad4a7 Mon Sep 17 00:00:00 2001
From: Geremia Taglialatela <tagliala.dev@gmail.com>
Date: Sun, 15 Dec 2024 22:53:18 +0100
Subject: [PATCH 3/5] Move `csvChanged` to data attributes

---
 dist/client-side-validations.esm.js            | 15 +++++++++------
 dist/client-side-validations.js                | 15 +++++++++------
 src/core.js                                    | 11 +++++++----
 src/index.js                                   |  4 ++--
 test/javascript/public/test/validateElement.js |  3 ++-
 vendor/assets/javascripts/rails.validations.js | 15 +++++++++------
 6 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/dist/client-side-validations.esm.js b/dist/client-side-validations.esm.js
index 265c03dd9..55da38221 100644
--- a/dist/client-side-validations.esm.js
+++ b/dist/client-side-validations.esm.js
@@ -86,7 +86,7 @@ var ClientSideValidations = {
           jQuery(this).isValid(form.ClientSideValidations.settings.validators);
         },
         'change.ClientSideValidations': function changeClientSideValidations() {
-          jQuery(this).data('csvChanged', 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('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
+          $element[0].dataset.csvChanged = 'true';
+          $element.isValid(form.ClientSideValidations.settings.validators);
         },
         'keyup.ClientSideValidations': function keyupClientSideValidations() {
-          $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
+          $element[0].dataset.csvChanged = 'true';
+          $element.isValid(form.ClientSideValidations.settings.validators);
         }
       };
     }
@@ -248,7 +250,8 @@ var ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'));
     } else {
-      $target.removeData(['csvChanged', 'csvValid']);
+      $target.removeData(['csvValid']);
+      delete $target[0].dataset.csvChanged;
       $target.filter(':input').each(function () {
         delete this.dataset.csvValidate;
       });
@@ -674,10 +677,10 @@ var isMarkedForDestroy = function isMarkedForDestroy($element) {
 };
 var executeAllValidators = function executeAllValidators($element, validators) {
   var element = $element[0];
-  if ($element.data('csvChanged') === false || element.disabled) {
+  if (element.dataset.csvChanged === 'false' || element.disabled) {
     return;
   }
-  $element.data('csvChanged', 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
index 0983fdecb..1510e2a51 100644
--- a/dist/client-side-validations.js
+++ b/dist/client-side-validations.js
@@ -90,7 +90,7 @@
             jQuery(this).isValid(form.ClientSideValidations.settings.validators);
           },
           'change.ClientSideValidations': function changeClientSideValidations() {
-            jQuery(this).data('csvChanged', 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('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
+            $element[0].dataset.csvChanged = 'true';
+            $element.isValid(form.ClientSideValidations.settings.validators);
           },
           'keyup.ClientSideValidations': function keyupClientSideValidations() {
-            $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
+            $element[0].dataset.csvChanged = 'true';
+            $element.isValid(form.ClientSideValidations.settings.validators);
           }
         };
       }
@@ -252,7 +254,8 @@
       if ($target.is('form')) {
         ClientSideValidations.disable($target.find(':input'));
       } else {
-        $target.removeData(['csvChanged', 'csvValid']);
+        $target.removeData(['csvValid']);
+        delete $target[0].dataset.csvChanged;
         $target.filter(':input').each(function () {
           delete this.dataset.csvValidate;
         });
@@ -678,10 +681,10 @@
   };
   var executeAllValidators = function executeAllValidators($element, validators) {
     var element = $element[0];
-    if ($element.data('csvChanged') === false || element.disabled) {
+    if (element.dataset.csvChanged === 'false' || element.disabled) {
       return;
     }
-    $element.data('csvChanged', false);
+    element.dataset.csvChanged = 'false';
     if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
       passElement($element);
     }
diff --git a/src/core.js b/src/core.js
index 669b16503..eb5105b62 100644
--- 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('csvChanged', 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('csvChanged', true).isValid(form.ClientSideValidations.settings.validators)
+        $element[0].dataset.csvChanged = 'true'
+        $element.isValid(form.ClientSideValidations.settings.validators)
       },
       'keyup.ClientSideValidations': () => {
-        $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators)
+        $element[0].dataset.csvChanged = 'true'
+        $element.isValid(form.ClientSideValidations.settings.validators)
       }
     })
   },
@@ -239,7 +241,8 @@ const ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'))
     } else {
-      $target.removeData(['csvChanged', 'csvValid'])
+      $target.removeData(['csvValid'])
+      delete $target[0].dataset.csvChanged
       $target.filter(':input').each(function () {
         delete this.dataset.csvValidate
       })
diff --git a/src/index.js b/src/index.js
index db0f3f404..3310725b2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -185,11 +185,11 @@ const isMarkedForDestroy = ($element) => {
 
 const executeAllValidators = ($element, validators) => {
   const element = $element[0]
-  if ($element.data('csvChanged') === false || element.disabled) {
+  if (element.dataset.csvChanged === 'false' || element.disabled) {
     return
   }
 
-  $element.data('csvChanged', false)
+  element.dataset.csvChanged = 'false'
 
   if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
     passElement($element)
diff --git a/test/javascript/public/test/validateElement.js b/test/javascript/public/test/validateElement.js
index dd47e66c5..14a1f71b7 100644
--- 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('csvChanged', true)
+  input.val('123')
+  input[0].dataset.csvChanged = 'true'
   assert.ok(input.isValid(dataCsv.validators))
 })
 
diff --git a/vendor/assets/javascripts/rails.validations.js b/vendor/assets/javascripts/rails.validations.js
index 0983fdecb..1510e2a51 100644
--- a/vendor/assets/javascripts/rails.validations.js
+++ b/vendor/assets/javascripts/rails.validations.js
@@ -90,7 +90,7 @@
             jQuery(this).isValid(form.ClientSideValidations.settings.validators);
           },
           'change.ClientSideValidations': function changeClientSideValidations() {
-            jQuery(this).data('csvChanged', 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('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
+            $element[0].dataset.csvChanged = 'true';
+            $element.isValid(form.ClientSideValidations.settings.validators);
           },
           'keyup.ClientSideValidations': function keyupClientSideValidations() {
-            $element.data('csvChanged', true).isValid(form.ClientSideValidations.settings.validators);
+            $element[0].dataset.csvChanged = 'true';
+            $element.isValid(form.ClientSideValidations.settings.validators);
           }
         };
       }
@@ -252,7 +254,8 @@
       if ($target.is('form')) {
         ClientSideValidations.disable($target.find(':input'));
       } else {
-        $target.removeData(['csvChanged', 'csvValid']);
+        $target.removeData(['csvValid']);
+        delete $target[0].dataset.csvChanged;
         $target.filter(':input').each(function () {
           delete this.dataset.csvValidate;
         });
@@ -678,10 +681,10 @@
   };
   var executeAllValidators = function executeAllValidators($element, validators) {
     var element = $element[0];
-    if ($element.data('csvChanged') === false || element.disabled) {
+    if (element.dataset.csvChanged === 'false' || element.disabled) {
       return;
     }
-    $element.data('csvChanged', false);
+    element.dataset.csvChanged = 'false';
     if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
       passElement($element);
     }

From 0ca48350dfed4dc5bf17cc135ceaa2c2acdb95e3 Mon Sep 17 00:00:00 2001
From: Geremia Taglialatela <tagliala.dev@gmail.com>
Date: Sat, 21 Dec 2024 12:20:44 +0100
Subject: [PATCH 4/5] 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
```
---
 CHANGELOG.md                                   |  1 +
 dist/client-side-validations.esm.js            | 14 ++++++++++----
 dist/client-side-validations.js                | 14 ++++++++++----
 src/core.js                                    |  2 +-
 src/index.js                                   | 12 +++++++++---
 vendor/assets/javascripts/rails.validations.js | 14 ++++++++++----
 6 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6569b415c..cf697d8f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
   - `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
 
diff --git a/dist/client-side-validations.esm.js b/dist/client-side-validations.esm.js
index 55da38221..8d27de7ad 100644
--- a/dist/client-side-validations.esm.js
+++ b/dist/client-side-validations.esm.js
@@ -250,7 +250,7 @@ var ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'));
     } else {
-      $target.removeData(['csvValid']);
+      delete $target[0].dataset.csvValid;
       delete $target[0].dataset.csvChanged;
       $target.filter(':input').each(function () {
         delete this.dataset.csvValidate;
@@ -631,13 +631,19 @@ var validateForm = function validateForm($form, validators) {
   return valid;
 };
 var passElement = function passElement($element) {
-  $element.trigger('element:validate:pass.ClientSideValidations').data('csvValid', 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('csvValid', 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('csvValid') !== 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) {
diff --git a/dist/client-side-validations.js b/dist/client-side-validations.js
index 1510e2a51..b028c4022 100644
--- a/dist/client-side-validations.js
+++ b/dist/client-side-validations.js
@@ -254,7 +254,7 @@
       if ($target.is('form')) {
         ClientSideValidations.disable($target.find(':input'));
       } else {
-        $target.removeData(['csvValid']);
+        delete $target[0].dataset.csvValid;
         delete $target[0].dataset.csvChanged;
         $target.filter(':input').each(function () {
           delete this.dataset.csvValidate;
@@ -635,13 +635,19 @@
     return valid;
   };
   var passElement = function passElement($element) {
-    $element.trigger('element:validate:pass.ClientSideValidations').data('csvValid', 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('csvValid', 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('csvValid') !== 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) {
diff --git a/src/core.js b/src/core.js
index eb5105b62..853c29183 100644
--- a/src/core.js
+++ b/src/core.js
@@ -241,7 +241,7 @@ const ClientSideValidations = {
     if ($target.is('form')) {
       ClientSideValidations.disable($target.find(':input'))
     } else {
-      $target.removeData(['csvValid'])
+      delete $target[0].dataset.csvValid
       delete $target[0].dataset.csvChanged
       $target.filter(':input').each(function () {
         delete this.dataset.csvValidate
diff --git a/src/index.js b/src/index.js
index 3310725b2..9eb472cd1 100644
--- 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('csvValid', 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('csvValid', 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('csvValid') !== false
+  const element = $element[0]
+  $element.trigger('element:validate:after.ClientSideValidations')
+  return element.dataset.csvValid !== 'false'
 }
 
 const executeValidator = (validatorFunctions, validatorFunction, validatorOptions, $element) => {
diff --git a/vendor/assets/javascripts/rails.validations.js b/vendor/assets/javascripts/rails.validations.js
index 1510e2a51..b028c4022 100644
--- a/vendor/assets/javascripts/rails.validations.js
+++ b/vendor/assets/javascripts/rails.validations.js
@@ -254,7 +254,7 @@
       if ($target.is('form')) {
         ClientSideValidations.disable($target.find(':input'));
       } else {
-        $target.removeData(['csvValid']);
+        delete $target[0].dataset.csvValid;
         delete $target[0].dataset.csvChanged;
         $target.filter(':input').each(function () {
           delete this.dataset.csvValidate;
@@ -635,13 +635,19 @@
     return valid;
   };
   var passElement = function passElement($element) {
-    $element.trigger('element:validate:pass.ClientSideValidations').data('csvValid', 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('csvValid', 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('csvValid') !== 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) {

From cbc150d0e3a181d49ef3c35f2b13a21c065a53e9 Mon Sep 17 00:00:00 2001
From: Geremia Taglialatela <tagliala.dev@gmail.com>
Date: Sat, 21 Dec 2024 12:27:10 +0100
Subject: [PATCH 5/5] Fix specs

---
 test/javascript/public/test/form_builders/validateForm.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/javascript/public/test/form_builders/validateForm.js b/test/javascript/public/test/form_builders/validateForm.js
index 2165e84a8..902683ba5 100644
--- 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('csvChanged', false)
-  input.attr('data-valid', true)
+  input[0].dataset.csvChanged = 'false'
 
   form.trigger('submit')