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

Author: tagliala

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
 

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

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

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

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) => {

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