Issue with jquery validate

[fanomena-private]

Actual behavior.

When using jquery.validate (https://github.com/jquery-validation/jquery-validation) on the same form where a Froala WYSIWYG editor is embedded, we see the following error:

Cannot read property 'replace' of undefined at a.validator.escapeCssMeta

Steps to reproduce the problem.

On the form where you use the editor

$('form').validate();

Then load the editor inside the form:

$('div#froala-editor').froalaEditor({ toolbarButtons: ['html'] })

In particular, I am using the html toolbar-object to switch between wysiwyg and code view. Then the error pops up.

OS.

Mac OS 10.13.6

Browser.

Chrome 68.0.3440.106

[stefanneculai]

Thanks for reporting this. It is best to check with the guys from jQuery validate as it looks like they have some code in there which is being applied to all the elements on the page.

[johancruyff2019]

it's not jquery validate error...
it's happened from froala.
when i upload the file, after uploading, my controller returned new path, but this error happened again!

[hoquochai]

jquery.validate.js:1032 Uncaught TypeError: Cannot read property 'replace' of undefined
at $.validator.escapeCssMeta (jquery.validate.js:1032)
at $.validator.errorsFor (jquery.validate.js:1013)
at $.validator.prepareElement (jquery.validate.js:691)
at $.validator.element (jquery.validate.js:474)
at $.validator.onfocusout (jquery.validate.js:300)
at HTMLDivElement.delegate (jquery.validate.js:423)
at HTMLFormElement.dispatch (jquery.min.js:2)
at HTMLFormElement.y.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at Object.simulate (jquery.min.js:2)

[engin-can]

Same here

[ilyaskarim]

@hoquochai Do you think it would be possible to make a jsFiddle to highlight the problem? That would speed-up things a lot. Here is a basic jsFiddle you could use as a starting point: https://jsfiddle.net/froala/wc5c3jhk/. so I can reopen the issue?

[abram27]

Not sure if it is the best selector to use but seems to stop the error from happening:
jQuery.validator.setDefaults({ ignore: "[contenteditable='true'].fr-element.fr-view" });

See jquery-validation/jquery-validation#1875

[tomservaux]

I'm having this problem as well and none of the above selectors work for ignoring the error. One thing that might at least help is to correct the actual error

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

which is caused by calling replace() on an empty css string. This interrupts the remaining validation due to the throw and prevents the new value from being copied into the underlying textarea element.

If we could get that error fixed (simply guarantee that "a" is valid or at least check it in escapeCSSMeta before calling replace() on it) then some of the side effects of the bug would be alleviated. I am aware that this issue in jquery validation. I am simply hoping that someone can fix the bug causing the "a" value being passed into escapeCssMeta from being undefined.

Either way, can we get a final ruling on whether this is going to get fixed? In the meantime I'm going to hack my local copy until someone can fix this once and for all.

Thanks

[furcan]

Please change
from

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

to

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

Thanks.

[KoalaBear84]

This is now merged on jQuery Validate:
#2154