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 ```
DavyJonesLocker · Dec 21, 2024 · 0ca4835 · 0ca4835
1 parent 1f1fecb
commit 0ca4835
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {