jquery-validation: Summernote compatibility - "Cannot read property 'replace' of undefined"

@jeremycook You can do the same using jQuery.validator.setDefaults():

// This will set `ignore` for all validation calls
jQuery.validator.setDefaults({
  // This will ignore all hidden elements alongside `contenteditable` elements
  // that have no `name` attribute
  ignore: ":hidden, [contenteditable='true']:not([name])"
});

Please change from

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

to

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

Thanks.

@bennybee @r0lan2 See the following code. I explained a little what happened and what should be done in order to make Summernote to work with jQuery-validation.

var v = $('#myForm').validate({
  // Ignore all hidden elements except your `textarea` element. Also, you have to
  // ignore the div that `Summernote` uses to hold your entered data (which is also a
  // content editable div with no name) because this plugin will try to check it on blur.
  // and because it has no name, the error shown in your capture will pop up (the
  // `escapeCssMeta` method escapes the name/id of an element, and in this case
  // an undefined value was passed to it, hence the error message).
  //
  // The div has the following class `.note-editable .panel-body` that we can use to
  // exclude it from validation
  ignore: ":hidden:not(#summernote),.note-editable.panel-body"
});

var myElement = $('#summernote');

myElement.summernote({
  // See: http://summernote.org/deep-dive/
  callbacks: {
    // Register the `onChnage` callback in order to listen to the changes of the
    // Summernote editor. You can also use the event `summernote.change` to handle
    // the change event as follow:
    //   myElement.summernote()
    //     .on("summernote.change", function(event, contents, $editable) {
    //       // ...
    //     });
    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);
    }
  }
});

Hi all I just want make one addition update to this issue: if you are using bootstrap 4 and obviously panel has been replaced by card. So one of the line in the resolution can be now replaced: ignore: ":hidden:not(#summernote),.note-editable.panel-body" with ignore: ":hidden:not(#summernote),.note-editable.card-block"

why i am still getting this error in asp.net mvc 5 with latest version? <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="CommentText"> Remark <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <textarea name="CommentText" id="CommentText"></textarea> </div> </div>

here is my js code: var v = $('#fromRiskUnit').validate({ ignore: ":hidden:not(#CommentText),.note-editable.panel-body" }); $('#CommentText') .summernote({ focus: true, height: 150, codemirror: { theme: 'united' } }); I am not validation this input, if the input has value, then I focus the other input, the error will throw.

@JeffreyChan @MrChriZ @paulgabronis @Arkni 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 *";
});

Actually I am getting the same error as @bennybee, I am using summernote v0.8.2 with asp.net mvc 5.

@jeremycook You can do the same using jQuery.validator.setDefaults():

// This will set `ignore` for all validation calls
jQuery.validator.setDefaults({
  // This will ignore all hidden elements alongside `contenteditable` elements
  // that have no `name` attribute
  ignore: ":hidden, [contenteditable='true']:not([name])"
});

It works only on submit. The ignore does not work for onfocusout 😦

@jeremycook You can do the same using jQuery.validator.setDefaults():

// This will set `ignore` for all validation calls
jQuery.validator.setDefaults({
  // This will ignore all hidden elements alongside `contenteditable` elements
  // that have no `name` attribute
  ignore: ":hidden, [contenteditable='true']:not([name])"
});

This works like a charm also for emojionearea. Without :hidden ofcourse.

@Arkni Arkni Thank you for the reply. I figured it out myself! actually it was really simple. I was using old version and as I changed it with latest one, the error disappeared!

Just tested with 1.16.0-pre and still got the same error