Problem/Motivation

I am using CKE5 on a website where the Clientside Validation module is also installed. The Clientside Validation module is a requirement to use Webform Cards module. When using CKE5 to edit a formatted text field, multiple errors of the following description appear in the browsers console:

TypeError: undefined is not an object (evaluating 'a.replace")
[f] escapeCssMeta-jquery.validate.min.is:432
[f] errorsFor - jquery.validate.min.js:426
[f] prepareElement - jquery.validate.min.js:305
[f] element - jquery.validate.min.js:200:90
[E] onfocusout - jquery.validate.min.js:113:102
[f] b - jquery.validate.min.js:158
[f] dispatch - js_hLcDzUJM1TVycPn9qCI3BAfVum1Q2GIFXGEwwur0Zz4.js:2:43342
[f] trigger - js_hLcDzUJM1TVycPn9qCI3BAfVum1Q2GIFxGEwwur0Zz4.js:2:71948
[f] simulate - js_hLcDzUJM1TVycPn9qCI3BAfVum1Q2GIFxGEwwur0Zz4.js:2:72453
[f] i - js_hLcDzUJM1TVycPn9qCI3BAfVum1Q2GIFxGEwwur0Zz4.js:2:72743

Steps to reproduce

Using Drupal 9.5.10 with CKE5 installed and applied as the editor for a text input format. Install Webform Cards and the Clientside Validation modules. Create or edit any content that has a formatted text field using CKE5 as the editor. Use any widget in the editor toolbar to apply formatting to any text -- for example, apply bold to a word. In the browser's JavaScript console, the error should appear.

Issue fork drupal-3384651

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

aaronpinero created an issue. See original summary.

cilefen’s picture

cilefen commented

I am familiar with "jquery" but i've not heard of "jguerv"or "jguery". What are they?

deborahblessy’s picture

deborahblessy commented
Assigned: Unassigned » deborahblessy
deborahblessy’s picture

deborahblessy commented
Assigned: deborahblessy » Unassigned
deborahblessy’s picture

deborahblessy commented

Iam working on this

deborahblessy’s picture

deborahblessy commented

Hi @aaronpinero

You are getting the conflict issue(TypeError) because the jquery.validate.min.js is being loaded from CDN by default from the ClientSide Validation module.

Solution to this issue:

We should have the jQuery library with web/libraries/jquery-validation.

Instead of doing manually please do follow below step to fix it:

1. Add the below things in composer.json file
"repositories": {
"drupal": {
"type": "composer",
"url": "https://packages.drupal.org/8"
},
"npm-assets": {
"type": "composer",
"url": "https://asset-packagist.org"
}
},
and
"extra": {
"installer-types": [
"npm-asset"
],
...............
within installer paths,
"installer-paths": {
"web/core": [
"type:drupal-core",
"type:npm-asset"
],
.........................

2. Require following composer dependencies.
composer require oomphinc/composer-installers-extender
composer require npm-asset/jquery-validation:^1.17

3. If you face any issue on site after step 2, Please remove composer.lock and vendor folder. Then run composer install command.

4. Now you will be able to see the installed node_modules folder outside web.

5. Please copy jquery-validation folder from node_modules folder and place it inside web/libraries folder. Please ensure proper permission added.

6. Now the validation will be handled from js file in the libraries folder. You will be able to apply ckeditor things without console errors.

Note: After everything is setup successfully, you can remove node_modules folder and its related .json file outside the folder.

Please let me know if you tried the above steps and post your comments.

deborahblessy’s picture

deborahblessy commented
Status: Active » Needs review
deborahblessy’s picture

deborahblessy commented
Status: Needs review » Active
deborahblessy’s picture

deborahblessy commented
Status: Active » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Postponed (maintainer needs more info)

@aaronpinero could you provide some additional info.

#2 mentions not super familiar with jguery

#6 offers some guidance too.

aaronpinero’s picture

aaronpinero commented
Issue summary: View changes
aaronpinero’s picture

aaronpinero commented

@deborahblessy Thank you for your suggestion regarding loading the jQuery library from CDN vs. requiring the library in composer. That might have fixed the issue. I need to do a more thorough check, but a quick test seems to indicate the console errors are gone.

The original problem description had some typos because I copied the text from a screen capture. I guess OCR still has issues in 2023.

lamp5’s picture

lamp5
Primary language Polish
Location Rzeszow
commented

#6 works for me, thx. I had the same problem on Drupal 9.4 and Clientside validation

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Project: Drupal core » Clientside Validation
Version: 9.5.x-dev » 4.0.x-dev
Component: ckeditor5.module » Code
Status: Postponed (maintainer needs more info) » Needs work
Issue tags: +Needs issue summary update, +Needs title update
Related issues: +#1988968: Drupal.ajax does not guarantee that "add new JS file to page" commands have finished before calling said JS

That sounds like a wrong asset library definition.

I bet that https://www.drupal.org/node/3293812, which shipped in 9.5, indirectly is exposing this.

#3324062: [Regression] Changes to Drupal.ajax in 9.5.x have caused regressions in paragraphs_features module is another example of this.

edykst’s picture

edykst commented

Accidentally hid. Deleted the comment

edykst changed the visibility of the branch 3384651-possible-conflict-between to active.

yannickoo’s picture

yannickoo
Location Berlin
commented

I just found out that Clientside Validation is still not compatible with CKEditor 5 which is provided by Core's ckeditor5 module. It seems like it takes a bit of effort to make sure the module is checking for the right libraries and to use the updated way to access CKEditor instances e.g. instead of CKEDITOR we would need to switch to Drupal.CKEditor5Instances etc.