CKEditor 5 and jQuery Validation error

Question

Pretty new to working with CKEditor and I am confused about this jQuery validation error that I have been receiving. My project is C# MVC and utilizing UnobtrusiveJavascript and the Unobtrusive Validate plugin.

I have a text area built via an HtmlHelper:

 @Html.TextAreaFor(model => model.BookSummary, new { id = "bookMainInfo" })

Here is what I am doing to create the Editor. It replaces the text area when the page is opened:

 var theEditor;

// Load CKEditor in place of the information table
ClassicEditor
    .create(document.querySelector('#bookMainInfo'), {
        toolbar: ['heading', 'bold', 'italic', 'underline', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading4', view: 'h4', title: 'Large Heading', class: 'ck-heading_heading4' },
                { model: 'heading5', view: 'h5', title: 'Medium Heading', class: 'ck-heading_heading5' },
                { model: 'heading6', view: 'h6', title: 'Small Heading', class: 'ck-heading_heading6' }
            ]
        }
    })
    .then(editor => {
        theEditor = editor; // Save editor for usage later
    })
    .catch(error => {
        console.error(error);
    });

Everything seems to be working okay. I can successfully enter data and submit the form without issue. However, if I have any text entered in the editor and click outside of the editor, the following error is thrown in the console:

VM149 jquery.validate.js:1033 Uncaught TypeError: Cannot read property 'replace' of undefined
at $.validator.escapeCssMeta (VM149 jquery.validate.js:1033)
at $.validator.errorsFor (VM149 jquery.validate.js:1014)
at $.validator.prepareElement (VM149 jquery.validate.js:692)
at $.validator.element (VM149 jquery.validate.js:475)
at $.validator.onfocusout (VM149 jquery.validate.js:300)
at HTMLDivElement.delegate (VM149 jquery.validate.js:424)
at HTMLFormElement.dispatch (VM148 jquery-3.3.1.js:5183)
at HTMLFormElement.elemData.handle (VM148 jquery-3.3.1.js:4991)
at Object.trigger (VM148 jquery-3.3.1.js:8249)
at Object.simulate (VM148 jquery-3.3.1.js:8318)

The error is logged twice, and I can repeatedly generate the error by clicking in and out of the editor with text in it.An empty editor leads to no error. It seems like it is blowing up on this section of jquery.validate.js in specific:

    escapeCssMeta: function( string ) {
        return string.replace( /([\\!"#$%&'()*+,./:;<=>?@\[\]^`{|}~])/g, "\\$1" );
    }

Is there anything I can do to supress this error or stop jQuery validation from doing whatever it is trying to do here? It has no impact on me functionally, but it is quite an annoyance.

Answer 1

So I found a solution that fits my needs. Previously, the #bookMainInfo TextArea was tied to a model property with a [Required] attribute.

The error was occuring because when jQuery validation called escapeCssMeta, it was trying to run validation on the CKEditor editor that was created. The editor does not have an Id or Name, so the "Cannot read property 'replace' of undefined" message was thrown in the console.

In my case, I was able to remove the [Required] attribute from that field and it is no longer an issue.