diff --git a/CHANGELOG.md b/CHANGELOG.md index 99f64d17c..cf697d8f2 100644 --- 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 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..8d27de7ad 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); + 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 index c7c21d793..b028c4022 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); + 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 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..853c29183 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) + 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 index fe99561db..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('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 index a9842f6f8..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('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 index 9e7fa181f..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('changed', 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 c7c21d793..b028c4022 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); + 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); }