jQuery Validate with Summernote Editor error: Cannot read property ‘replace’ of undefined

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" })


$('#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...

        <span class="field-validation-valid text-danger" data-valmsg-for="Content" data-valmsg-replace="true"></span>

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:

            ignore: ":hidden:not(.post-content)"

Any ideas?

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 *";

the cleanest approach without hardcoded Ids comes from JQuery.Validate github discussion it self:

  // 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

Read More:   Can vue-router open a link in a new tab?

If you ever encounter this issue with the quill (rich text editor) when validating forms with jQuery validator, simply do the following:

  ignore: ".ql-container *"
  // continue validation

Where ‘#id-of-form-to-validate’ could simply be an id, class or form element.

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');

      // 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.

Source (Official) : https://github.com/jquery-validation/jquery-validation/issues/1875#issuecomment-272667183

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"});

replace code here in validation.js

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

This code works for me

    ignore: ".note-editor *"

I found this thread while testing jQuery TE and the same validator error appeared, which can be fixed with a similar solution.

    ignore: ".jqte *"
    // continue with validation

This code works for me:

validator = $("#form").validate({
  ignore: ":not(#summernote),.note-editable.panel-body",
  rules: {
    nombre: {
      required: true,
      minlength: 8,
      maxlength: 40

This code segment remove error and also continue validation:

    ignore: ":hidden:not(textarea), [contenteditable="true"]:not([name])",

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts