jQuery Validate with Summernote Editor error: Cannot read property 'replace' of undefined
Solution 1
I use this script to tell the validator to ignore Summernote elements. It can be tweaked to ignore elements generated by other HTML editors.
$('form').each(function () {
if ($(this).data('validator'))
$(this).data('validator').settings.ignore = ".note-editor *";
});
Solution 2
the cleanest approach without hardcoded Ids comes from JQuery.Validate github discussion it self:
jQuery.validator.setDefaults({
// This will ignore all hidden elements alongside `contenteditable` elements
// that have no `name` attribute
ignore: ":hidden, [contenteditable='true']:not([name])"
});
Souce: https://github.com/jquery-validation/jquery-validation/issues/1875
Solution 3
If you ever encounter this issue with the quill (rich text editor) when validating forms with jQuery validator, simply do the following:
$('#id-of-form-to-validate').validate({
ignore: ".ql-container *"
// continue validation
});
Where '#id-of-form-to-validate' could simply be an id, class or form element.
Solution 4
You can resolve above error by tweaking your code little bit.
var v = $('#myForm').validate({
// exclude it from validation
ignore: ":hidden:not(#summernote),.note-editable.panel-body"
});
var myElement = $('#summernote');
myElement.summernote({
// See: http://summernote.org/deep-dive/
callbacks: {
onChange: function(contents, $editable) {
// Note that at this point, the value of the `textarea` is not the same as the one
// you entered into the summernote editor, so you have to set it yourself to make
// the validation consistent and in sync with the value.
myElement.val(myElement.summernote('isEmpty') ? "" : contents);
// You should re-validate your element after change, because the plugin will have
// no way to know that the value of your `textarea` has been changed if the change
// was done programmatically.
v.element(myElement);
}
}
});
Source (Official) : https://github.com/jquery-validation/jquery-validation/issues/1875#issuecomment-272667183
Solution 5
I tried the above answers but didn't work in my case. This one works for me:
jQuery.validator.setDefaults({ ignore: ":hidden:not(#summernote),.note-editable.panel-body"});
Related videos on Youtube
umutesen
Updated on July 23, 2022Comments
-
umutesen almost 2 years
I am using MVC5 to build a form with summernote editor.
Razor code:
<div class="form-group"> @Html.LabelFor(model => model.Content, htmlAttributes: new { @class = "control-label" }) @Html.EditorFor(model => model.Content, new { htmlAttributes = new { @class = "form-control post-content"} }) @Html.ValidationMessageFor(model => model.Content, "", new { @class = "text-danger" }) </div>
JS:
$('#blog-form .post-content').summernote({ height: 400, minHeight: 300, codemirror: { theme: 'default' } });
With the above setup the editor control renders fine. However, as soon as I move away from the editor, i.e. onBlur, I get the following error in the console:
Uncaught TypeError: Cannot read property 'replace' of undefined at $.validator.escapeCssMeta (jquery.validate.js:1014) at $.validator.errorsFor (jquery.validate.js:995) at $.validator.prepareElement (jquery.validate.js:679) at $.validator.element (jquery.validate.js:466) at $.validator.onfocusout (jquery.validate.js:289) at HTMLDivElement.delegate (jquery.validate.js:411) at HTMLFormElement.dispatch (jquery-2.2.3.js:4737) at HTMLFormElement.elemData.handle (jquery-2.2.3.js:4549) at Object.trigger (jquery-2.2.3.js:7819) at Object.simulate (jquery-2.2.3.js:7890)
Here is the rendered part of the DOM:
<div class="form-group"> <label class="control-label" for="Content">Content</label> <textarea class="form-control post-content text-box multi-line" id="Content" name="Content" style="display: none;"></textarea> <div class="note-editor note-frame panel panel-default"> ...summernote generated... </div> <span class="field-validation-valid text-danger" data-valmsg-for="Content" data-valmsg-replace="true"></span> </div>
jQuery version: 2.2.3
jQuery Validate version: 1.16.0
Microsoft.jQuery.Unobtrusive.Validation version: 3.2.3
I have done some research and already know that this is not related to summernote plug-in. I tried running the following code inside and of outside document ready, but it did not work:
$.validator.setDefaults({ ignore: ":hidden:not(.post-content)" });
Any ideas?
-
Sparky about 7 yearsFirst, you'll need to inspect the rendered DOM and show us the code here; just the relevant JavaScript and HTML. Second, type out the error, instead of showing us a screenshot, which is harder to read and useless to the SO search engine.
-
umutesen about 7 yearsplease see the updated question
-
Arkni about 7 years@UmutEsen see
jquery-validation/jquery-validation#1875 (comment)
-
-
Sumith Harshan almost 6 yearsBut Even filled the required fields can't submit the form. How do I validate only selected fields ?
-
Eric Sassaman about 4 yearsThis works great for summernote 0.8.16 but I made the mistake of setting those defaults inside my jQuery ready function. By then it's too late, I think defaults are copied to validator instances attached to specific forms before then, so setting defaults had no effect.
-
Shaan over 3 yearsI was using summernote 0.8.18. I simply put this code under <script> tag and my long error on console disappeared !
-
Eric Conklin about 2 yearsYes! This fixed my issue. Thanks so much.