ClientSideValidations.settings is intermittently undefined

[rjo]

Apologies in advance for not filing with the template. I'm blocked by policy from pasting in all my form code. If requested I'll create a test app and use that for a full report.

CSV is working great for me, but 1 out around 10 page loads $('#form')[0].ClientSideValidations.settings is undefined. I keep thinking its some kind of load order problem but I've noodled on that and can't narrow it down.

Rails 7.0.2 Ruby 3.0.3 CSV 20.0.2

I'm using import maps

importmap.rb

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.0.1/dist/stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js", preload: true
pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js", preload: true
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
pin "client-side-validations", preload: true
pin "stimulus-autocomplete", to: "https://ga.jspm.io/npm:stimulus-autocomplete@3.0.2/src/autocomplete.js"
pin "@rails/activestorage", to: "https://ga.jspm.io/npm:@rails/activestorage@7.0.4/app/assets/javascripts/activestorage.esm.js"

application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import jQuery from "jquery";
import("jquery-ui-dist");
import 'client-side-validations'

window.$ = window.jQuery = jQuery;

import * as ActiveStorage from "@rails/activestorage"
ActiveStorage.start()

I'm using a stimulus controller to handle manual validation by checking $('#form').isValid($('#form')[0].ClientSideValidations.settings.validators)

This works great the vast majority of the time but every now and then $('#form')[0].ClientSideValidations.settings is undefined and I have no idea why or where to look at this point.

Ideas?

[rjo]

Update ... if I call $('#form').enableClientSideValidations(); in my stimulus controller's connect() function the problem never occurs.

What might be the reason that CSV would be intermittently enabled?

[tagliala]

Hi,

yes, it can be. It should happen when turbo:load or ready events are not called, so maybe when stimulus swaps the content inside a page

having connect() to call the event should be the way to go

It is not so different from https://github.com/DavyJonesLocker/client_side_validations/wiki/Bootstrap-Modal-Validations

For the moment I'm closing here

[tagliala]

@rjo feel free to create a new wiki page about stimulus integration