Skip to content

Commit 3e77c26

Browse files
taglialatagliala
authored
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
1 parent e2d95c8 commit 3e77c26

File tree

11 files changed

+101
-57
lines changed

11 files changed

+101
-57
lines changed

‎CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Changelog
22

3+
## 23.0.0 / unreleased
4+
5+
* [FEATURE] Breaking change: Add `csv` prefix to CSV related data attributes:
6+
- `data-changed` => `data-csv-changed`
7+
- `data-valid` => `data-csv-valid`
8+
- `data-validate` => `data-csv-validate`
9+
* [FEATURE] Use data attributes instead of `jQuery.data()`
10+
311
## 22.3.0 / 2024-11-12
412

513
* [FEATURE] Rails 8.0 compatibility

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -461,7 +461,7 @@ Here is an example callback for sliding out the error message when the validatio
461461
window.ClientSideValidations.callbacks.element.fail = function($element, message, callback) {
462462
callback()
463463
464-
if ($element.data('valid') !== false) {
464+
if ($element.data('csvValid') !== false) {
465465
$element.parent().find('.message').hide().show('slide', { direction: 'left', easing: 'easeOutBounce' }, 500)
466466
}
467467
}

‎dist/client-side-validations.esm.js

+22-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Client Side Validations JS - v0.4.0 (https://github.com/DavyJonesLocker/client_side_validations)
2+
* Client Side Validations JS - v0.5.0 (https://github.com/DavyJonesLocker/client_side_validations)
33
* Copyright (c) 2024 Geremia Taglialatela, Brian Cardarella
44
* Licensed under MIT (https://opensource.org/licenses/mit-license.php)
55
*/
@@ -86,7 +86,7 @@ var ClientSideValidations = {
8686
jQuery(this).isValid(form.ClientSideValidations.settings.validators);
8787
},
8888
'change.ClientSideValidations': function changeClientSideValidations() {
89-
jQuery(this).data('changed', true);
89+
this.dataset.csvChanged = 'true';
9090
},
9191
'element:validate:after.ClientSideValidations': function elementValidateAfterClientSideValidations(eventData) {
9292
ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
@@ -111,10 +111,12 @@ var ClientSideValidations = {
111111
inputConfirmation: function inputConfirmation($element, form) {
112112
return {
113113
'focusout.ClientSideValidations': function focusoutClientSideValidations() {
114-
$element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
114+
$element[0].dataset.csvChanged = 'true';
115+
$element.isValid(form.ClientSideValidations.settings.validators);
115116
},
116117
'keyup.ClientSideValidations': function keyupClientSideValidations() {
117-
$element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
118+
$element[0].dataset.csvChanged = 'true';
119+
$element.isValid(form.ClientSideValidations.settings.validators);
118120
}
119121
};
120122
}
@@ -148,7 +150,7 @@ var ClientSideValidations = {
148150
for (var eventName in eventsToBind) {
149151
var eventFunction = eventsToBind[eventName];
150152
$input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
151-
jQuery(this).attr('data-validate', true);
153+
this.dataset.csvValidate = 'true';
152154
}).on(eventName, eventFunction);
153155
}
154156
$input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -232,7 +234,7 @@ var ClientSideValidations = {
232234
},
233235
selectors: {
234236
inputs: ':input:not(button):not([type="submit"])[name]:visible:enabled',
235-
validate_inputs: ':input:enabled:visible[data-validate]',
237+
validate_inputs: ':input:enabled:visible[data-csv-validate]',
236238
forms: 'form[data-client-side-validations]'
237239
},
238240
validators: {
@@ -248,9 +250,10 @@ var ClientSideValidations = {
248250
if ($target.is('form')) {
249251
ClientSideValidations.disable($target.find(':input'));
250252
} else {
251-
$target.removeData(['changed', 'valid']);
253+
delete $target[0].dataset.csvValid;
254+
delete $target[0].dataset.csvChanged;
252255
$target.filter(':input').each(function () {
253-
jQuery(this).removeAttr('data-validate');
256+
delete this.dataset.csvValidate;
254257
});
255258
}
256259
},
@@ -628,13 +631,19 @@ var validateForm = function validateForm($form, validators) {
628631
return valid;
629632
};
630633
var passElement = function passElement($element) {
631-
$element.trigger('element:validate:pass.ClientSideValidations').data('valid', null);
634+
var element = $element[0];
635+
$element.trigger('element:validate:pass.ClientSideValidations');
636+
delete element.dataset.csvValid;
632637
};
633638
var failElement = function failElement($element, message) {
634-
$element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false);
639+
var element = $element[0];
640+
$element.trigger('element:validate:fail.ClientSideValidations', message);
641+
element.dataset.csvValid = 'false';
635642
};
636643
var afterValidate = function afterValidate($element) {
637-
return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false;
644+
var element = $element[0];
645+
$element.trigger('element:validate:after.ClientSideValidations');
646+
return element.dataset.csvValid !== 'false';
638647
};
639648
var executeValidator = function executeValidator(validatorFunctions, validatorFunction, validatorOptions, $element) {
640649
for (var validatorOption in validatorOptions) {
@@ -674,10 +683,10 @@ var isMarkedForDestroy = function isMarkedForDestroy($element) {
674683
};
675684
var executeAllValidators = function executeAllValidators($element, validators) {
676685
var element = $element[0];
677-
if ($element.data('changed') === false || element.disabled) {
686+
if (element.dataset.csvChanged === 'false' || element.disabled) {
678687
return;
679688
}
680-
$element.data('changed', false);
689+
element.dataset.csvChanged = 'false';
681690
if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
682691
passElement($element);
683692
}

‎dist/client-side-validations.js

+22-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Client Side Validations JS - v0.4.0 (https://github.com/DavyJonesLocker/client_side_validations)
2+
* Client Side Validations JS - v0.5.0 (https://github.com/DavyJonesLocker/client_side_validations)
33
* Copyright (c) 2024 Geremia Taglialatela, Brian Cardarella
44
* Licensed under MIT (https://opensource.org/licenses/mit-license.php)
55
*/
@@ -90,7 +90,7 @@
9090
jQuery(this).isValid(form.ClientSideValidations.settings.validators);
9191
},
9292
'change.ClientSideValidations': function changeClientSideValidations() {
93-
jQuery(this).data('changed', true);
93+
this.dataset.csvChanged = 'true';
9494
},
9595
'element:validate:after.ClientSideValidations': function elementValidateAfterClientSideValidations(eventData) {
9696
ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
@@ -115,10 +115,12 @@
115115
inputConfirmation: function inputConfirmation($element, form) {
116116
return {
117117
'focusout.ClientSideValidations': function focusoutClientSideValidations() {
118-
$element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
118+
$element[0].dataset.csvChanged = 'true';
119+
$element.isValid(form.ClientSideValidations.settings.validators);
119120
},
120121
'keyup.ClientSideValidations': function keyupClientSideValidations() {
121-
$element.data('changed', true).isValid(form.ClientSideValidations.settings.validators);
122+
$element[0].dataset.csvChanged = 'true';
123+
$element.isValid(form.ClientSideValidations.settings.validators);
122124
}
123125
};
124126
}
@@ -152,7 +154,7 @@
152154
for (var eventName in eventsToBind) {
153155
var eventFunction = eventsToBind[eventName];
154156
$input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
155-
jQuery(this).attr('data-validate', true);
157+
this.dataset.csvValidate = 'true';
156158
}).on(eventName, eventFunction);
157159
}
158160
$input.filter(':checkbox').on('change.ClientSideValidations', function () {
@@ -236,7 +238,7 @@
236238
},
237239
selectors: {
238240
inputs: ':input:not(button):not([type="submit"])[name]:visible:enabled',
239-
validate_inputs: ':input:enabled:visible[data-validate]',
241+
validate_inputs: ':input:enabled:visible[data-csv-validate]',
240242
forms: 'form[data-client-side-validations]'
241243
},
242244
validators: {
@@ -252,9 +254,10 @@
252254
if ($target.is('form')) {
253255
ClientSideValidations.disable($target.find(':input'));
254256
} else {
255-
$target.removeData(['changed', 'valid']);
257+
delete $target[0].dataset.csvValid;
258+
delete $target[0].dataset.csvChanged;
256259
$target.filter(':input').each(function () {
257-
jQuery(this).removeAttr('data-validate');
260+
delete this.dataset.csvValidate;
258261
});
259262
}
260263
},
@@ -632,13 +635,19 @@
632635
return valid;
633636
};
634637
var passElement = function passElement($element) {
635-
$element.trigger('element:validate:pass.ClientSideValidations').data('valid', null);
638+
var element = $element[0];
639+
$element.trigger('element:validate:pass.ClientSideValidations');
640+
delete element.dataset.csvValid;
636641
};
637642
var failElement = function failElement($element, message) {
638-
$element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false);
643+
var element = $element[0];
644+
$element.trigger('element:validate:fail.ClientSideValidations', message);
645+
element.dataset.csvValid = 'false';
639646
};
640647
var afterValidate = function afterValidate($element) {
641-
return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false;
648+
var element = $element[0];
649+
$element.trigger('element:validate:after.ClientSideValidations');
650+
return element.dataset.csvValid !== 'false';
642651
};
643652
var executeValidator = function executeValidator(validatorFunctions, validatorFunction, validatorOptions, $element) {
644653
for (var validatorOption in validatorOptions) {
@@ -678,10 +687,10 @@
678687
};
679688
var executeAllValidators = function executeAllValidators($element, validators) {
680689
var element = $element[0];
681-
if ($element.data('changed') === false || element.disabled) {
690+
if (element.dataset.csvChanged === 'false' || element.disabled) {
682691
return;
683692
}
684-
$element.data('changed', false);
693+
element.dataset.csvChanged = 'false';
685694
if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
686695
passElement($element);
687696
}

‎lib/client_side_validations/version.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# frozen_string_literal: true
22

33
module ClientSideValidations
4-
VERSION = '22.3.0'
4+
VERSION = '23.0.0'
55
end

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"/vendor/"
6868
]
6969
},
70-
"version": "0.4.0",
70+
"version": "0.5.0",
7171
"directories": {
7272
"lib": "lib",
7373
"test": "test"

‎src/core.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const ClientSideValidations = {
4747
jQuery(this).isValid(form.ClientSideValidations.settings.validators)
4848
},
4949
'change.ClientSideValidations': function () {
50-
jQuery(this).data('changed', true)
50+
this.dataset.csvChanged = 'true'
5151
},
5252
'element:validate:after.ClientSideValidations': function (eventData) {
5353
ClientSideValidations.callbacks.element.after(jQuery(this), eventData)
@@ -72,10 +72,12 @@ const ClientSideValidations = {
7272
}),
7373
inputConfirmation: ($element, form) => ({
7474
'focusout.ClientSideValidations': () => {
75-
$element.data('changed', true).isValid(form.ClientSideValidations.settings.validators)
75+
$element[0].dataset.csvChanged = 'true'
76+
$element.isValid(form.ClientSideValidations.settings.validators)
7677
},
7778
'keyup.ClientSideValidations': () => {
78-
$element.data('changed', true).isValid(form.ClientSideValidations.settings.validators)
79+
$element[0].dataset.csvChanged = 'true'
80+
$element.isValid(form.ClientSideValidations.settings.validators)
7981
}
8082
})
8183
},
@@ -115,7 +117,7 @@ const ClientSideValidations = {
115117
const eventFunction = eventsToBind[eventName]
116118

117119
$input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
118-
jQuery(this).attr('data-validate', true)
120+
this.dataset.csvValidate = 'true'
119121
}).on(eventName, eventFunction)
120122
}
121123

@@ -223,7 +225,7 @@ const ClientSideValidations = {
223225
},
224226
selectors: {
225227
inputs: ':input:not(button):not([type="submit"])[name]:visible:enabled',
226-
validate_inputs: ':input:enabled:visible[data-validate]',
228+
validate_inputs: ':input:enabled:visible[data-csv-validate]',
227229
forms: 'form[data-client-side-validations]'
228230
},
229231
validators: {
@@ -239,9 +241,10 @@ const ClientSideValidations = {
239241
if ($target.is('form')) {
240242
ClientSideValidations.disable($target.find(':input'))
241243
} else {
242-
$target.removeData(['changed', 'valid'])
244+
delete $target[0].dataset.csvValid
245+
delete $target[0].dataset.csvChanged
243246
$target.filter(':input').each(function () {
244-
jQuery(this).removeAttr('data-validate')
247+
delete this.dataset.csvValidate
245248
})
246249
}
247250
},

‎src/index.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -125,15 +125,21 @@ const validateForm = ($form, validators) => {
125125
}
126126

127127
const passElement = ($element) => {
128-
$element.trigger('element:validate:pass.ClientSideValidations').data('valid', null)
128+
const element = $element[0]
129+
$element.trigger('element:validate:pass.ClientSideValidations')
130+
delete element.dataset.csvValid
129131
}
130132

131133
const failElement = ($element, message) => {
132-
$element.trigger('element:validate:fail.ClientSideValidations', message).data('valid', false)
134+
const element = $element[0]
135+
$element.trigger('element:validate:fail.ClientSideValidations', message)
136+
element.dataset.csvValid = 'false'
133137
}
134138

135139
const afterValidate = ($element) => {
136-
return $element.trigger('element:validate:after.ClientSideValidations').data('valid') !== false
140+
const element = $element[0]
141+
$element.trigger('element:validate:after.ClientSideValidations')
142+
return element.dataset.csvValid !== 'false'
137143
}
138144

139145
const executeValidator = (validatorFunctions, validatorFunction, validatorOptions, $element) => {
@@ -185,11 +191,11 @@ const isMarkedForDestroy = ($element) => {
185191

186192
const executeAllValidators = ($element, validators) => {
187193
const element = $element[0]
188-
if ($element.data('changed') === false || element.disabled) {
194+
if (element.dataset.csvChanged === 'false' || element.disabled) {
189195
return
190196
}
191197

192-
$element.data('changed', false)
198+
element.dataset.csvChanged = 'false'
193199

194200
if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
195201
passElement($element)

‎test/javascript/public/test/form_builders/validateForm.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,7 @@ QUnit.test('Validate form with an input changed to false (async)', function (ass
6565
var input = form.find('input#user_name')
6666

6767
input.val('Test')
68-
input.attr('changed', false)
69-
input.attr('data-valid', true)
68+
input[0].dataset.csvChanged = 'false'
7069

7170
form.trigger('submit')
7271

‎test/javascript/public/test/validateElement.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -491,7 +491,8 @@ QUnit.test('Return validation result', function (assert) {
491491

492492
assert.notOk(input.isValid(dataCsv.validators))
493493

494-
input.val('123').data('changed', true)
494+
input.val('123')
495+
input[0].dataset.csvChanged = 'true'
495496
assert.ok(input.isValid(dataCsv.validators))
496497
})
497498

0 commit comments

Comments
 (0)