client_side_validations 23.1.0 → 24.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e348526cc932f74b54d932cb5ed6b5eb3523152ab4d0d399eb7d2e9fa3ece69
-  data.tar.gz: 8b35aaca55edd965f6f7d92afe006b759f428a754f038e65135967342c08cf09
+  metadata.gz: 2d881931955d33c3687fb6b38218fe696d081d40c6d41f788d3201bc82a5b2da
+  data.tar.gz: b2ca222a27708e478bd129d30eb694d6ee9cdaf8ae6547f32dad4b0ab280d199
 SHA512:
-  metadata.gz: f5057acdbcd6163e60a1ef75ac52a47b32a0afe65f7e9163106941cceb15fdd1640f7d3260daf35e8c7f2f937804ed873223b3ca55098cdecd98e8a6bf94a424
-  data.tar.gz: 98e14bf600b15d4bcfa412a2a5a03daf83d85a4a8d13c572fbf4d1c30a1d4a7225d66ec8a41306cba9855b6a8ecccf893fd580e0033850f553fb4773c4d063e2
+  metadata.gz: 18e724e1e357c233d91bc16106ef5b7326f8c0b54a04a986cf488c31e1ba72cd357fce89bb3a59178e237143e05c87255a7adc6dd33e02ae9e9b7aa44ddc76e0
+  data.tar.gz: 0b14c029231eff6401e95f37db1cb5fb0434379fb675121e704ddbb268bba77e237315d05e30e31858ea10ae7ddd6432145f96e4d09a8c43da1abaa5e145cd6d

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 24.0.0 / 2026-04-19
+* [FEATURE] Breaking change: Remove the jQuery runtime dependency and the old jQuery plugin aliases from the published JavaScript assets
+* [FEATURE] Breaking change: Public JavaScript APIs now work with native DOM elements and DOM collections instead of jQuery-wrapped objects
+* [ENHANCEMENT] Use native browser events and event listeners throughout the runtime and test harness
+
 ## 23.1.0 / 2026-01-27
 
 * [FEATURE] Add jQuery 4.0.0 compatibility

data/README.md

@@ -56,12 +56,11 @@ config/initializers/client_side_validations.rb
 
 Instructions depend on your technology stack.
 
-Please note that CSV depends on jQuery >= 3.7.1 (jQuery slim is fine).
+ClientSideValidations no longer depends on jQuery.
+If you previously installed `jquery-rails`, `jquery_ujs`, or custom jQuery startup code only for ClientSideValidations, you can remove that integration when upgrading to 24.x.
 
 ####  When using Webpacker ####
 
-Make sure that you are requiring jQuery.
-
 Add the following package:
 
 ```sh
@@ -92,42 +91,77 @@ detect `window.Turbolinks` and attach its event handlers.
 
 ####  When using Sprockets ####
 
-Since ClientSideValidations can also be used via webpacker, it does not require
-by default `jquery-rails` gem.
+Add the following to your `app/assets/javascripts/application.js` file:
 
-Make sure that `jquery-rails` is part of your bundled gems and `application.js`,
-otherwise add:
+```js
+//= require rails.validations
+```
 
-```ruby
-gem 'jquery-rails'
+If you are using [Turbolinks](https://github.com/turbolinks/turbolinks),
+make sure that `rails.validations` is required **after** `turbolinks`, so
+ClientSideValidations can properly attach its event handlers.
+
+If you need to copy the asset files from the gem into your project, run:
+
+```
+rails g client_side_validations:copy_assets
 ```
 
-to your `Gemfile`, run `bundle`, and add
+Note: If you run `copy_assets`, you will need to run it again each time you update this project.
+
+## Migration Guide ##
+
+### 24.x Breaking Changes ###
+
+If you are upgrading to 24.x, update your integration code to use the `ClientSideValidations` object directly.
+
+The old jQuery plugin methods are removed. Use the DOM-first public API instead:
 
 ```js
-//= require jquery
+ClientSideValidations.enable(form)
+ClientSideValidations.validate(form)
+ClientSideValidations.isValid(form, validators)
+ClientSideValidations.disable(form)
+ClientSideValidations.reset(form)
 ```
 
-to your `app/assets/javascripts/application.js` file.
+These methods accept native DOM elements and DOM collections. They do not accept jQuery objects or CSS selector strings.
 
-Then, add the following to your `app/assets/javascripts/application.js` file
-after `//= require jquery`.
+Custom validators, form builders, and callbacks now receive native DOM nodes instead of jQuery wrappers. Update any custom code to use DOM APIs such as `.value`, `.form`, `.closest()`, and `querySelector()`.
+Local validators are called as `(element, options)`. Form callbacks receive `(form, eventData)`, and element callbacks receive either `(element, message, callback)` or `(element, callback)` depending on the event.
 
-```js
-//= require rails.validations
+All runtime-owned validation state attributes are now namespaced under `csv`. If you read or write these attributes in custom selectors, callbacks, or validators, update them to the scoped names:
+
+```text
+data-changed => data-csv-changed
+data-valid => data-csv-valid
+data-validate => data-csv-validate
+data-not-locally-unique => data-csv-not-locally-unique
 ```
 
-If you are using [Turbolinks](https://github.com/turbolinks/turbolinks),
-make sure that `rails.validations` is required **after** `turbolinks`, so
-ClientSideValidations can properly attach its event handlers.
+The matching dataset properties are `element.dataset.csvChanged`, `element.dataset.csvValid`, `element.dataset.csvValidate`, and `element.dataset.csvNotLocallyUnique`. `csvChanged` is stored as the string values `'true'` and `'false'`.
 
-If you need to copy the asset files from the gem into your project, run:
+**jQuery namespaced events are removed.** Events are now plain native DOM custom events. If your application listens to or unbinds events using jQuery-style namespacing, you must update those calls.
+
+Before:
 
+```js
+$(form).on('form:validate:before.ClientSideValidations', handler)
+$(input).off('.ClientSideValidations')
 ```
-rails g client_side_validations:copy_assets
+
+After:
+
+```js
+form.addEventListener('form:validate:before', handler)
+// store and pass the handler reference to removeEventListener when unbinding
 ```
 
-Note: If you run `copy_assets`, you will need to run it again each time you update this project.
+The full list of native events dispatched by ClientSideValidations: `form:validate:before`, `form:validate:after`, `form:validate:pass`, `form:validate:fail`, `element:validate:before`, `element:validate:after`, `element:validate:pass`, `element:validate:fail`.
+
+If you are upgrading from a version older than 23.0.0, the `data-csv-*` renaming above is required for any custom code that still reads or writes the old attribute names. If you are already on 23.x, the new 24.x upgrade step is to update any local uniqueness integrations that still reference `data-not-locally-unique` or `element.dataset.notLocallyUnique`.
+
+If your application vendors the compiled asset with `rails g client_side_validations:copy_assets`, run that generator again after upgrading so your copied asset matches the current jQuery-free bundle.
 
 ## Initializer ##
 
@@ -324,11 +358,11 @@ If you need to change the markup of how the errors are rendered you can modify t
 
 ```js
 window.ClientSideValidations.formBuilders['ActionView::Helpers::FormBuilder'] = {
-  add: function($element, settings, message) {
+  add: function(element, settings, message) {
     // custom add code here
   },
 
-  remove: function($element, settings) {
+  remove: function(element, settings) {
     // custom remove code here
   }
 }
@@ -376,14 +410,14 @@ en:
 Finally we need to add a client side validator. This can be done by hooking into the `ClientSideValidations.validator` object. Create a new file `app/assets/javascripts/rails.validations.customValidators.js`
 
 ```js
-// The validator variable is a JSON Object
-// The selector variable is a jQuery Object
-window.ClientSideValidations.validators.local['email'] = function($element, options) {
+// The options variable is a JSON Object
+// The element variable is a DOM element
+window.ClientSideValidations.validators.local.email = function (element, options) {
   // Your validator code goes in here
-  if (!/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i.test($element.val())) {
+  if (!/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i.test(element.value)) {
     // When the value fails to pass validation you need to return the error message.
     // It can be derived from validator.message
-    return options.message;
+    return options.message
   }
 }
 ```
@@ -408,7 +442,7 @@ There are many reasons why you might want to enable, disable, or even completely
 If you have rendered a new form via AJAX into your page you will need to enable that form for validation:
 
 ```js
-$(new_form).enableClientSideValidations();
+ClientSideValidations.enable(newForm)
 ```
 
 You should attach this to an event that is fired when the new HTML renders.
@@ -416,7 +450,7 @@ You should attach this to an event that is fired when the new HTML renders.
 You can use the same function if you introduce new inputs to an existing form:
 
 ```js
-$(new_input).enableClientSideValidations();
+ClientSideValidations.enable(newInput)
 ```
 
 ### Disabling ###
@@ -424,7 +458,7 @@ $(new_input).enableClientSideValidations();
 If you wish to turn off validations entirely on a form:
 
 ```js
-$(form).disableClientSideValidations();
+ClientSideValidations.disable(form)
 ```
 
 ### Resetting ###
@@ -432,44 +466,54 @@ $(form).disableClientSideValidations();
 You can reset the current state of the validations, clear all error messages, and reattach clean event handlers:
 
 ```js
-$(form).resetClientSideValidations();
+ClientSideValidations.reset(form)
 ```
 
 ## Callbacks ##
 
 `ClientSideValidations` will run callbacks based upon the state of the element or form. The following callbacks are supported:
 
-* `ClientSideValidations.callbacks.element.after($element, eventData)`
-* `ClientSideValidations.callbacks.element.before($element, eventData)`
-* `ClientSideValidations.callbacks.element.fail($element, message, callback, eventData)`
-* `ClientSideValidations.callbacks.element.pass($element, callback, eventData)`
-* `ClientSideValidations.callbacks.form.after($form, eventData)`
-* `ClientSideValidations.callbacks.form.before($form, eventData)`
-* `ClientSideValidations.callbacks.form.fail($form, eventData)`
-* `ClientSideValidations.callbacks.form.pass($form, eventData)`
+* `ClientSideValidations.callbacks.element.after(element, eventData)`
+* `ClientSideValidations.callbacks.element.before(element, eventData)`
+* `ClientSideValidations.callbacks.element.fail(element, message, callback, eventData)`
+* `ClientSideValidations.callbacks.element.pass(element, callback, eventData)`
+* `ClientSideValidations.callbacks.form.after(form, eventData)`
+* `ClientSideValidations.callbacks.form.before(form, eventData)`
+* `ClientSideValidations.callbacks.form.fail(form, eventData)`
+* `ClientSideValidations.callbacks.form.pass(form, eventData)`
 
 The names of the callbacks should be pretty straight forward. For example, `ClientSideValidations.callbacks.form.fail` will be called if a form failed to validate. And `ClientSideValidations.callbacks.element.before` will be called before that particular element's validations are run.
 
-All element callbacks will receive the element in a jQuery object as the first parameter and the eventData object as the second parameter. `ClientSideValidations.callbacks.element.fail()` will receive the message of the failed validation as the second parameter, the callback for adding the error fields as the third and the eventData object as the third. `ClientSideValidations.elementValidatePass()` will receive the callback for removing the error fields. The error field callbacks must be run in your custom callback in some fashion. (either after a blocking event or as a callback for another event, such as an animation)
+All element callbacks receive the DOM element as the first parameter and the native event object as the second parameter. `ClientSideValidations.callbacks.element.fail()` receives the failed message as the second parameter, the callback for adding error fields as the third parameter, and the eventData object as the fourth parameter. `ClientSideValidations.callbacks.element.pass()` receives the callback for removing the error fields as the second parameter. The error field callbacks must still be invoked by your custom callback.
 
-All form callbacks will receive the form in a jQuery object as the first parameter and the eventData object as the second parameter.
+All form callbacks receive the DOM form element as the first parameter and the native event object as the second parameter.
 
-Here is an example callback for sliding out the error message when the validation fails then sliding it back in when the validation passes:
+Here is an example callback that animates the error message when validation fails:
 
 ``` javascript
-// You will need to require 'jquery-ui' for this to work
-window.ClientSideValidations.callbacks.element.fail = function($element, message, callback) {
+window.ClientSideValidations.callbacks.element.fail = function (element, message, callback) {
   callback()
 
-  if ($element.data('csvValid') !== false) {
-    $element.parent().find('.message').hide().show('slide', { direction: 'left', easing: 'easeOutBounce' }, 500)
+  var messageElement = element.parentElement.querySelector('.message')
+
+  if (messageElement) {
+    if (typeof messageElement.animate === 'function') {
+      messageElement.animate(
+        [
+          { opacity: 0, transform: 'translateX(-8px)' },
+          { opacity: 1, transform: 'translateX(0)' }
+        ],
+        { duration: 250, easing: 'ease-out', fill: 'both' }
+      )
+    } else {
+      messageElement.style.opacity = '1'
+      messageElement.style.transform = 'translateX(0)'
+    }
   }
 }
 
-window.ClientSideValidations.callbacks.element.pass = function($element, callback) {
-  // Take note how we're passing the callback to the hide()
-  // method so it is run after the animation is complete.
-  $element.parent().find('.message').hide('slide', { direction: 'left' }, 500, callback)
+window.ClientSideValidations.callbacks.element.pass = function (element, callback) {
+  callback()
 }
 ```
 
@@ -478,12 +522,9 @@ window.ClientSideValidations.callbacks.element.pass = function($element, callbac
   background-color: red;
   border-bottom-right-radius: 5px 5px;
   border-top-right-radius: 5px 5px;
+  display: inline-block;
   padding: 2px 5px;
 }
-
-div.field_with_errors div.ui-effects-wrapper {
-  display: inline-block !important;
-}
 ```
 
 Finally uncomment the `ActionView::Base.field_error_proc` override in `config/initializers/client_side_validations.rb`
@@ -506,22 +547,21 @@ By default, ClientSideValidations will automatically validate the form.
 If for some reason you would like to manually validate the form (for example you're working with a multi-step form), you can use the following approach:
 
 ```js
-$input     = $('#myInputField');
-$form      = $($input[0].form);
-validators = $form[0].ClientSideValidations.settings.validators;
+const input = document.getElementById('myInputField')
+const form = input.form
+const validators = form.ClientSideValidations.settings.validators
 
 // Validate a single field
-// It might not work for multiple inputs selected at once by `$input`
-$input.isValid(validators);
+ClientSideValidations.isValid(input, validators)
 
 // Validate the whole form
-$form.isValid(validators);
+ClientSideValidations.isValid(form, validators)
 ```
 
 To manually validate a single field, you may also trigger a focusout event:
 
 ```js
-$('#myInputField').trigger('focusout');
+input.dispatchEvent(new Event('focusout', { bubbles: true }))
 ```
 
 ## Authors ##

data/lib/client_side_validations/action_view/form_helper.rb

@@ -86,7 +86,7 @@ module ClientSideValidations
           @validators.each_with_object({}) do |object_opts, validator_hash|
             next unless object_opts[0].respond_to?(:client_side_validation_hash)
 
-            option_hash = object_opts[1].each_with_object({}) do |attr, result|
+            option_hash = object_opts[1].each_with_object({}) do |attr, result| # rubocop:disable Style/ReduceToHash -- False positive
               result[attr[0]] = attr[1][:options]
             end
 

data/lib/client_side_validations/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ClientSideValidations
-  VERSION = '23.1.0'
+  VERSION = '24.0.0'
 end

data/vendor/assets/javascripts/rails.validations.js

@@ -1,14 +1,50 @@
 /*!
- * Client Side Validations JS - v23.1.0 (https://github.com/DavyJonesLocker/client_side_validations)
+ * Client Side Validations JS - v24.0.0 (https://github.com/DavyJonesLocker/client_side_validations)
  * Copyright (c) 2026 Geremia Taglialatela, Brian Cardarella
  * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
  */
 
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
-  typeof define === 'function' && define.amd ? define(['jquery'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ClientSideValidations = factory(global.jQuery));
-})(this, (function (jQuery) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ClientSideValidations = factory());
+})(this, (function () { 'use strict';
+
+  const boundEventListeners = new WeakMap();
+  const addBoundEventListener = (element, eventName, listener) => {
+    element.addEventListener(eventName, listener);
+    const listeners = boundEventListeners.get(element) || [];
+    listeners.push({
+      eventName,
+      listener
+    });
+    boundEventListeners.set(element, listeners);
+  };
+  const bindElementEvents = (element, eventsToBind) => {
+    for (const eventName in eventsToBind) {
+      addBoundEventListener(element, eventName, eventsToBind[eventName]);
+    }
+  };
+  const clearBoundEventListeners = element => {
+    const listeners = boundEventListeners.get(element);
+    if (!listeners) {
+      return;
+    }
+    listeners.forEach(_ref => {
+      let {
+        eventName,
+        listener
+      } = _ref;
+      element.removeEventListener(eventName, listener);
+    });
+    boundEventListeners.delete(element);
+  };
+  const dispatchCustomEvent = (element, eventName, detail) => {
+    element.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      detail
+    }));
+  };
 
   const arrayHasValue = (value, otherValues) => {
     for (let i = 0, l = otherValues.length; i < l; i++) {
@@ -23,136 +59,190 @@
     element.innerHTML = html;
     return element.firstChild;
   };
+  const isDOMCollection = target => {
+    return Array.isArray(target) || typeof NodeList !== 'undefined' && target instanceof NodeList || typeof HTMLCollection !== 'undefined' && target instanceof HTMLCollection || typeof RadioNodeList !== 'undefined' && target instanceof RadioNodeList;
+  };
+  const isDOMElement = target => {
+    return target != null && target.nodeType === 1;
+  };
+  const getDOMElements = target => {
+    if (target == null) {
+      return [];
+    }
+    if (isDOMElement(target)) {
+      return [target];
+    }
+    if (isDOMCollection(target)) {
+      return Array.from(target).filter(isDOMElement);
+    }
+    return [];
+  };
+  const isFormElement = element => {
+    return element.tagName === 'FORM';
+  };
+  const isInputElement = element => {
+    switch (element.tagName) {
+      case 'INPUT':
+        return element.type !== 'submit' && element.type !== 'button';
+      case 'SELECT':
+      case 'TEXTAREA':
+        return true;
+      default:
+        return false;
+    }
+  };
+  const isVisible = element => {
+    return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+  };
   const isValuePresent = value => {
     return !/^\s*$/.test(value || '');
   };
 
+  const isNamedInputElement = element => {
+    return isInputElement(element) && element.name != null && element.name !== '';
+  };
+  const getFormControls = form => {
+    return Array.from(form.elements).filter(isInputElement);
+  };
+  const getFormInputs = form => {
+    return getFormControls(form).filter(element => {
+      return isNamedInputElement(element) && !element.disabled && isVisible(element);
+    });
+  };
+  const findFormElementByName = (form, name) => {
+    return getFormControls(form).find(element => element.name === name);
+  };
+  const enableForm = form => {
+    ClientSideValidations.enablers.form(form);
+  };
+  const enableForms = () => {
+    document.querySelectorAll(ClientSideValidations.selectors.forms).forEach(enableForm);
+  };
   const ClientSideValidations = {
     callbacks: {
       element: {
-        after: ($element, eventData) => {},
-        before: ($element, eventData) => {},
-        fail: ($element, message, addError, eventData) => addError(),
-        pass: ($element, removeError, eventData) => removeError()
+        after: (element, eventData) => {},
+        before: (element, eventData) => {},
+        fail: (element, message, addError, eventData) => addError(),
+        pass: (element, removeError, eventData) => removeError()
       },
       form: {
-        after: ($form, eventData) => {},
-        before: ($form, eventData) => {},
-        fail: ($form, eventData) => {},
-        pass: ($form, eventData) => {}
+        after: (form, eventData) => {},
+        before: (form, eventData) => {},
+        fail: (form, eventData) => {},
+        pass: (form, eventData) => {}
       }
     },
     eventsToBind: {
-      form: (form, $form) => ({
-        'submit.ClientSideValidations': eventData => {
-          if (!$form.isValid(form.ClientSideValidations.settings.validators)) {
+      form: form => ({
+        submit: eventData => {
+          if (!ClientSideValidations.isValid(form, form.ClientSideValidations.settings.validators)) {
             eventData.preventDefault();
             eventData.stopImmediatePropagation();
           }
         },
-        'ajax:beforeSend.ClientSideValidations': function (eventData) {
+        'ajax:beforeSend': function (eventData) {
           if (eventData.target === this) {
-            $form.isValid(form.ClientSideValidations.settings.validators);
+            ClientSideValidations.isValid(form, form.ClientSideValidations.settings.validators);
           }
         },
-        'form:validate:after.ClientSideValidations': eventData => {
-          ClientSideValidations.callbacks.form.after($form, eventData);
+        'form:validate:after': eventData => {
+          ClientSideValidations.callbacks.form.after(form, eventData);
         },
-        'form:validate:before.ClientSideValidations': eventData => {
-          ClientSideValidations.callbacks.form.before($form, eventData);
+        'form:validate:before': eventData => {
+          ClientSideValidations.callbacks.form.before(form, eventData);
         },
-        'form:validate:fail.ClientSideValidations': eventData => {
-          ClientSideValidations.callbacks.form.fail($form, eventData);
+        'form:validate:fail': eventData => {
+          ClientSideValidations.callbacks.form.fail(form, eventData);
         },
-        'form:validate:pass.ClientSideValidations': eventData => {
-          ClientSideValidations.callbacks.form.pass($form, eventData);
+        'form:validate:pass': eventData => {
+          ClientSideValidations.callbacks.form.pass(form, eventData);
         }
       }),
       input: form => ({
-        'focusout.ClientSideValidations': function () {
-          jQuery(this).isValid(form.ClientSideValidations.settings.validators);
+        focusout: function () {
+          ClientSideValidations.isValid(this, form.ClientSideValidations.settings.validators);
         },
-        'change.ClientSideValidations': function () {
+        change: function () {
           this.dataset.csvChanged = 'true';
         },
-        'element:validate:after.ClientSideValidations': function (eventData) {
-          ClientSideValidations.callbacks.element.after(jQuery(this), eventData);
+        'element:validate:after': function (eventData) {
+          ClientSideValidations.callbacks.element.after(this, eventData);
         },
-        'element:validate:before.ClientSideValidations': function (eventData) {
-          ClientSideValidations.callbacks.element.before(jQuery(this), eventData);
+        'element:validate:before': function (eventData) {
+          ClientSideValidations.callbacks.element.before(this, eventData);
         },
-        'element:validate:fail.ClientSideValidations': function (eventData, message) {
-          const $element = jQuery(this);
-          ClientSideValidations.callbacks.element.fail($element, message, function () {
-            form.ClientSideValidations.addError($element, message);
+        'element:validate:fail': function (eventData) {
+          const element = this;
+          const message = eventData.detail;
+          ClientSideValidations.callbacks.element.fail(element, message, function () {
+            form.ClientSideValidations.addError(element, message);
           }, eventData);
         },
-        'element:validate:pass.ClientSideValidations': function (eventData) {
-          const $element = jQuery(this);
-          ClientSideValidations.callbacks.element.pass($element, function () {
-            form.ClientSideValidations.removeError($element);
+        'element:validate:pass': function (eventData) {
+          const element = this;
+          ClientSideValidations.callbacks.element.pass(element, function () {
+            form.ClientSideValidations.removeError(element);
           }, eventData);
         }
       }),
-      inputConfirmation: ($element, form) => ({
-        'focusout.ClientSideValidations': () => {
-          $element[0].dataset.csvChanged = 'true';
-          $element.isValid(form.ClientSideValidations.settings.validators);
+      inputConfirmation: (elementToConfirm, form) => ({
+        focusout: () => {
+          elementToConfirm.dataset.csvChanged = 'true';
+          ClientSideValidations.isValid(elementToConfirm, form.ClientSideValidations.settings.validators);
         },
-        'keyup.ClientSideValidations': () => {
-          $element[0].dataset.csvChanged = 'true';
-          $element.isValid(form.ClientSideValidations.settings.validators);
+        keyup: () => {
+          elementToConfirm.dataset.csvChanged = 'true';
+          ClientSideValidations.isValid(elementToConfirm, form.ClientSideValidations.settings.validators);
         }
       })
     },
     enablers: {
       form: form => {
-        const $form = jQuery(form);
+        clearBoundEventListeners(form);
+        getFormControls(form).forEach(clearBoundEventListeners);
         form.ClientSideValidations = {
           settings: JSON.parse(form.dataset.clientSideValidations),
-          addError: ($element, message) => ClientSideValidations.formBuilders[form.ClientSideValidations.settings.html_settings.type].add($element, form.ClientSideValidations.settings.html_settings, message),
-          removeError: $element => ClientSideValidations.formBuilders[form.ClientSideValidations.settings.html_settings.type].remove($element, form.ClientSideValidations.settings.html_settings)
+          addError: (element, message) => ClientSideValidations.formBuilders[form.ClientSideValidations.settings.html_settings.type].add(element, form.ClientSideValidations.settings.html_settings, message),
+          removeError: element => ClientSideValidations.formBuilders[form.ClientSideValidations.settings.html_settings.type].remove(element, form.ClientSideValidations.settings.html_settings)
         };
-        const eventsToBind = ClientSideValidations.eventsToBind.form(form, $form);
-        for (const eventName in eventsToBind) {
-          const eventFunction = eventsToBind[eventName];
-          $form.on(eventName, eventFunction);
-        }
-        $form.find(ClientSideValidations.selectors.inputs).each(function () {
-          ClientSideValidations.enablers.input(this);
+        bindElementEvents(form, ClientSideValidations.eventsToBind.form(form));
+        getFormInputs(form).forEach(element => {
+          ClientSideValidations.enablers.input(element);
         });
       },
       input: function (input) {
-        const $input = jQuery(input);
         const form = input.form;
-        const $form = jQuery(form);
+        if (!form) {
+          return;
+        }
+        clearBoundEventListeners(input);
         const eventsToBind = ClientSideValidations.eventsToBind.input(form);
-        for (const eventName in eventsToBind) {
-          const eventFunction = eventsToBind[eventName];
-          $input.filter(':not(:radio):not([id$=_confirmation])').each(function () {
-            this.dataset.csvValidate = 'true';
-          }).on(eventName, eventFunction);
+        if (input.type !== 'radio' && !(input.id && input.id.endsWith('_confirmation'))) {
+          input.dataset.csvValidate = 'true';
+          bindElementEvents(input, eventsToBind);
         }
-        $input.filter(':checkbox').on('change.ClientSideValidations', function () {
-          jQuery(this).isValid(form.ClientSideValidations.settings.validators);
-        });
-        $input.filter('[id$=_confirmation]').each(function () {
-          const $element = jQuery(this);
-          const $elementToConfirm = $form.find("#".concat(this.id.match(/(.+)_confirmation/)[1], ":input"));
-          if ($elementToConfirm.length) {
-            const eventsToBind = ClientSideValidations.eventsToBind.inputConfirmation($elementToConfirm, form);
-            for (const eventName in eventsToBind) {
-              const eventFunction = eventsToBind[eventName];
-              jQuery("#".concat($element.attr('id'))).on(eventName, eventFunction);
+        if (input.type === 'checkbox') {
+          bindElementEvents(input, {
+            change: function () {
+              ClientSideValidations.isValid(this, form.ClientSideValidations.settings.validators);
             }
+          });
+        }
+        if (input.id && input.id.endsWith('_confirmation')) {
+          const elementToConfirm = document.getElementById(input.id.match(/(.+)_confirmation/)[1]);
+          if (elementToConfirm && elementToConfirm.form === form) {
+            bindElementEvents(input, ClientSideValidations.eventsToBind.inputConfirmation(elementToConfirm, form));
           }
-        });
+        }
       }
     },
     formBuilders: {
       'ActionView::Helpers::FormBuilder': {
-        add: ($element, settings, message) => {
-          const element = $element[0];
+        add: (element, settings, message) => {
+          if (!element) {
+            return;
+          }
           const form = element.form;
           const inputErrorTemplate = createElementFromHTML(settings.input_tag);
           let inputErrorElement = element.closest(".".concat(inputErrorTemplate.getAttribute('class').replace(/ /g, '.')));
@@ -182,8 +272,10 @@
             labelMessageElement.textContent = message;
           }
         },
-        remove: ($element, settings) => {
-          const element = $element[0];
+        remove: (element, settings) => {
+          if (!element) {
+            return;
+          }
           const form = element.form;
           const inputErrorClass = createElementFromHTML(settings.input_tag).getAttribute('class');
           const inputErrorElement = element.closest(".".concat(inputErrorClass.replace(/ /g, '.')));
@@ -213,8 +305,8 @@
       }
     },
     selectors: {
-      inputs: ':input:not(button):not([type="submit"])[name]:visible:enabled',
-      validate_inputs: ':input:enabled:visible[data-csv-validate]',
+      inputs: 'input:not([type="submit"]):not([type="button"])[name], select[name], textarea[name]',
+      validate_inputs: 'input[data-csv-validate]:not([type="submit"]):not([type="button"]), select[data-csv-validate], textarea[data-csv-validate]',
       forms: 'form[data-client-side-validations]'
     },
     validators: {
@@ -228,23 +320,31 @@
       remote: {}
     },
     disable: target => {
-      const $target = jQuery(target);
-      $target.off('.ClientSideValidations');
-      if ($target.is('form')) {
-        ClientSideValidations.disable($target.find(':input'));
-      } else {
-        delete $target[0].dataset.csvValid;
-        delete $target[0].dataset.csvChanged;
-        $target.filter(':input').each(function () {
-          delete this.dataset.csvValidate;
-        });
-      }
+      getDOMElements(target).forEach(element => {
+        clearBoundEventListeners(element);
+        if (isFormElement(element)) {
+          getFormControls(element).forEach(input => {
+            clearBoundEventListeners(input);
+            delete input.dataset.csvValid;
+            delete input.dataset.csvChanged;
+            delete input.dataset.csvValidate;
+          });
+          return;
+        }
+        delete element.dataset.csvValid;
+        delete element.dataset.csvChanged;
+        if (isInputElement(element)) {
+          delete element.dataset.csvValidate;
+        }
+      });
     },
     reset: form => {
-      const $form = jQuery(form);
       ClientSideValidations.disable(form);
       for (const key in form.ClientSideValidations.settings.validators) {
-        form.ClientSideValidations.removeError($form.find("[name=\"".concat(key, "\"]")));
+        const element = findFormElementByName(form, key);
+        if (element) {
+          form.ClientSideValidations.removeError(element);
+        }
       }
       ClientSideValidations.enablers.form(form);
     },
@@ -258,21 +358,23 @@
     start: () => {
       const initializeOnEvent = ClientSideValidations.initializeOnEvent();
       if (initializeOnEvent != null) {
-        jQuery(document).on(initializeOnEvent, () => jQuery(ClientSideValidations.selectors.forms).validate());
+        document.addEventListener(initializeOnEvent, enableForms);
+      } else if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', enableForms, {
+          once: true
+        });
       } else {
-        jQuery(() => jQuery(ClientSideValidations.selectors.forms).validate());
+        enableForms();
       }
     }
   };
 
-  const absenceLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const absenceLocalValidator = (element, options) => {
     if (isValuePresent(element.value)) {
       return options.message;
     }
   };
-  const presenceLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const presenceLocalValidator = (element, options) => {
     if (!isValuePresent(element.value)) {
       return options.message;
     }
@@ -288,8 +390,7 @@
     }
     return value === acceptOption;
   };
-  const acceptanceLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const acceptanceLocalValidator = (element, options) => {
     let valid = true;
     if (element.type === 'checkbox') {
       valid = element.checked;
@@ -308,8 +409,7 @@
   const hasValidFormat = (value, withOptions, withoutOptions) => {
     return withOptions && isMatching(value, withOptions) || withoutOptions && !isMatching(value, withoutOptions);
   };
-  const formatLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const formatLocalValidator = (element, options) => {
     const value = element.value;
     if (options.allow_blank && !isValuePresent(value)) {
       return;
@@ -394,8 +494,7 @@
     }
     return runFunctionValidations(formattedValue, form, options);
   };
-  const numericalityLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const numericalityLocalValidator = (element, options) => {
     const value = element.value;
     if (options.allow_blank && !isValuePresent(value)) {
       return;
@@ -425,8 +524,7 @@
       }
     }
   };
-  const lengthLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const lengthLocalValidator = (element, options) => {
     const value = element.value;
     if (options.allow_blank && !isValuePresent(value)) {
       return;
@@ -450,23 +548,20 @@
     }
     return options.in && isInList(value, options.in) || options.range && isInRange(value, options.range);
   };
-  const exclusionLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const exclusionLocalValidator = (element, options) => {
     const value = element.value;
     if (isIncluded(value, options, false) || !options.allow_blank && !isValuePresent(value)) {
       return options.message;
     }
   };
-  const inclusionLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const inclusionLocalValidator = (element, options) => {
     const value = element.value;
     if (!isIncluded(value, options, true)) {
       return options.message;
     }
   };
 
-  const confirmationLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const confirmationLocalValidator = (element, options) => {
     let value = element.value;
     let confirmationValue = document.getElementById("".concat(element.id, "_confirmation")).value;
     if (!options.case_sensitive) {
@@ -484,17 +579,16 @@
       otherValue = otherValue.toLowerCase();
     }
     if (otherValue === value) {
-      element.dataset.notLocallyUnique = true;
+      element.dataset.csvNotLocallyUnique = 'true';
       return false;
     }
-    if (element.dataset.notLocallyUnique) {
-      delete element.dataset.notLocallyUnique;
-      element.dataset.changed = true;
+    if (element.dataset.csvNotLocallyUnique) {
+      delete element.dataset.csvNotLocallyUnique;
+      element.dataset.csvChanged = 'true';
     }
     return true;
   };
-  const uniquenessLocalValidator = ($element, options) => {
-    const element = $element[0];
+  const uniquenessLocalValidator = (element, options) => {
     const elementName = element.name;
     const matches = elementName.match(/^(.+_attributes\])\[\d+\](.+)$/);
     if (!matches) {
@@ -529,42 +623,38 @@
     confirmation: confirmationLocalValidator,
     uniqueness: uniquenessLocalValidator
   };
-  jQuery.fn.disableClientSideValidations = function () {
-    ClientSideValidations.disable(this);
-    return this;
-  };
-  jQuery.fn.enableClientSideValidations = function () {
-    const selectors = {
-      forms: 'form',
-      inputs: 'input'
-    };
-    for (const selector in selectors) {
-      const enablers = selectors[selector];
-      this.filter(ClientSideValidations.selectors[selector]).each(function () {
-        ClientSideValidations.enablers[enablers](this);
-      });
-    }
-    return this;
-  };
-  jQuery.fn.resetClientSideValidations = function () {
-    this.filter(ClientSideValidations.selectors.forms).each(function () {
-      ClientSideValidations.reset(this);
+  ClientSideValidations.enable = target => {
+    getDOMElements(target).forEach(element => {
+      if (isFormElement(element)) {
+        ClientSideValidations.enablers.form(element);
+      } else if (isInputElement(element)) {
+        ClientSideValidations.enablers.input(element);
+      }
     });
-    return this;
+    return target;
   };
-  jQuery.fn.validate = function () {
-    this.filter(ClientSideValidations.selectors.forms).each(function () {
-      jQuery(this).enableClientSideValidations();
+  ClientSideValidations.validate = target => {
+    getDOMElements(target).forEach(element => {
+      if (isFormElement(element)) {
+        ClientSideValidations.enable(element);
+      }
     });
-    return this;
+    return target;
   };
-  jQuery.fn.isValid = function (validators) {
-    const obj = jQuery(this[0]);
-    if (obj.is('form')) {
-      return validateForm(obj, validators);
-    } else {
-      return validateElement(obj, validatorsFor(this[0].name, validators));
+  ClientSideValidations.isValid = (target, validators) => {
+    const element = getDOMElements(target)[0];
+    if (!element) {
+      return true;
+    }
+    if (!validators) {
+      var _form$ClientSideValid;
+      const form = isFormElement(element) ? element : element.form;
+      validators = form === null || form === void 0 || (_form$ClientSideValid = form.ClientSideValidations) === null || _form$ClientSideValid === void 0 || (_form$ClientSideValid = _form$ClientSideValid.settings) === null || _form$ClientSideValid === void 0 ? void 0 : _form$ClientSideValid.validators;
+    }
+    if (isFormElement(element)) {
+      return validateForm(element, validators || {});
     }
+    return validateElement(element, validatorsFor(element.name, validators || {}));
   };
   const cleanNestedElementName = (elementName, nestedMatches, validators) => {
     for (const validatorName in validators) {
@@ -583,97 +673,103 @@
     return elementName;
   };
   const validatorsFor = (elementName, validators) => {
+    if (!elementName || !validators) {
+      return {};
+    }
     if (Object.prototype.hasOwnProperty.call(validators, elementName)) {
       return validators[elementName];
     }
     return validators[cleanElementName(elementName, validators)] || {};
   };
-  const validateForm = ($form, validators) => {
+  const getValidationInputs = form => {
+    return Array.from(form.elements).filter(element => {
+      if (element.dataset.csvValidate == null || element.disabled) {
+        return false;
+      }
+      return isVisible(element);
+    });
+  };
+  const validateForm = (form, validators) => {
     let valid = true;
-    $form.trigger('form:validate:before.ClientSideValidations');
-    $form.find(ClientSideValidations.selectors.validate_inputs).each(function () {
-      if (!jQuery(this).isValid(validators)) {
+    dispatchCustomEvent(form, 'form:validate:before');
+    getValidationInputs(form).forEach(element => {
+      if (!validateElement(element, validatorsFor(element.name, validators))) {
         valid = false;
       }
-      return true;
     });
     if (valid) {
-      $form.trigger('form:validate:pass.ClientSideValidations');
+      dispatchCustomEvent(form, 'form:validate:pass');
     } else {
-      $form.trigger('form:validate:fail.ClientSideValidations');
+      dispatchCustomEvent(form, 'form:validate:fail');
     }
-    $form.trigger('form:validate:after.ClientSideValidations');
+    dispatchCustomEvent(form, 'form:validate:after');
     return valid;
   };
-  const passElement = $element => {
-    const element = $element[0];
-    $element.trigger('element:validate:pass.ClientSideValidations');
+  const passElement = element => {
+    dispatchCustomEvent(element, 'element:validate:pass');
     delete element.dataset.csvValid;
   };
-  const failElement = ($element, message) => {
-    const element = $element[0];
-    $element.trigger('element:validate:fail.ClientSideValidations', message);
+  const failElement = (element, message) => {
+    dispatchCustomEvent(element, 'element:validate:fail', message);
     element.dataset.csvValid = 'false';
   };
-  const afterValidate = $element => {
-    const element = $element[0];
-    $element.trigger('element:validate:after.ClientSideValidations');
+  const afterValidate = element => {
+    dispatchCustomEvent(element, 'element:validate:after');
     return element.dataset.csvValid !== 'false';
   };
-  const executeValidator = (validatorFunctions, validatorFunction, validatorOptions, $element) => {
+  const executeValidator = (validatorFunctions, validatorFunction, validatorOptions, element) => {
     for (const validatorOption in validatorOptions) {
       if (!validatorOptions[validatorOption]) {
         continue;
       }
-      const message = validatorFunction.call(validatorFunctions, $element, validatorOptions[validatorOption]);
+      const message = validatorFunction.call(validatorFunctions, element, validatorOptions[validatorOption]);
       if (message) {
-        failElement($element, message);
+        failElement(element, message);
         return false;
       }
     }
     return true;
   };
-  const executeValidators = (validatorFunctions, $element, validators) => {
+  const executeValidators = (validatorFunctions, element, validators) => {
     for (const validator in validators) {
       if (!validatorFunctions[validator]) {
         continue;
       }
-      if (!executeValidator(validatorFunctions, validatorFunctions[validator], validators[validator], $element)) {
+      if (!executeValidator(validatorFunctions, validatorFunctions[validator], validators[validator], element)) {
         return false;
       }
     }
     return true;
   };
-  const isMarkedForDestroy = $element => {
-    const element = $element[0];
+  const isMarkedForDestroy = element => {
     const elementName = element.name;
-    if (/\[([^\]]*?)\]$/.test(elementName)) {
+    const form = element.form;
+    if (form && /\[([^\]]*?)\]$/.test(elementName)) {
       const destroyInputName = elementName.replace(/\[([^\]]*?)\]$/, '[_destroy]');
-      const destroyInputElement = document.querySelector("input[name=\"".concat(destroyInputName, "\"]"));
+      const destroyInputElement = form.querySelector("input[name=\"".concat(destroyInputName, "\"]"));
       if (destroyInputElement && destroyInputElement.value === '1') {
         return true;
       }
     }
     return false;
   };
-  const executeAllValidators = ($element, validators) => {
-    const element = $element[0];
+  const executeAllValidators = (element, validators) => {
     if (element.dataset.csvChanged === 'false' || element.disabled) {
       return;
     }
     element.dataset.csvChanged = 'false';
-    if (executeValidators(ClientSideValidations.validators.all(), $element, validators)) {
-      passElement($element);
+    if (executeValidators(ClientSideValidations.validators.all(), element, validators)) {
+      passElement(element);
     }
   };
-  const validateElement = ($element, validators) => {
-    $element.trigger('element:validate:before.ClientSideValidations');
-    if (isMarkedForDestroy($element)) {
-      passElement($element);
+  const validateElement = (element, validators) => {
+    dispatchCustomEvent(element, 'element:validate:before');
+    if (isMarkedForDestroy(element)) {
+      passElement(element);
     } else {
-      executeAllValidators($element, validators);
+      executeAllValidators(element, validators);
     }
-    return afterValidate($element);
+    return afterValidate(element);
   };
   if (!window.ClientSideValidations) {
     window.ClientSideValidations = ClientSideValidations;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: client_side_validations
 version: !ruby/object:Gem::Version
-  version: 23.1.0
+  version: 24.0.0
 platform: ruby
 authors:
 - Geremia Taglialatela
@@ -102,7 +102,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.3
+rubygems_version: 4.0.9
 specification_version: 4
 summary: Client Side Validations
 test_files: []