jQuery Validate with Summernote Editor 错误：无法读取未定义的属性“替换”

Posted 2023-03-27

【中文标题】jQuery Validate with Summernote Editor 错误：无法读取未定义的属性“替换”

【英文标题】：jQuery Validate with Summernote Editor error: Cannot read property 'replace' of undefined

【发布时间】：2017-06-24 12:28:17

【问题描述】：

我正在使用 MVC5 用 Summernote 编辑器构建一个表单。

剃刀代码：

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

通过上述设置，编辑器控件呈现良好。但是，一旦我离开编辑器，即 onBlur，我就会在控制台中收到以下错误：

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)

这是 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 版本：2.2.3

jQuery 验证版本：1.16.0

Microsoft.jQuery.Unobtrusive.Validation 版本：3.2.3

我做了一些研究，已经知道这与summernote插件无关。我尝试在文档内部和外部运行以下代码，但没有成功：

$.validator.setDefaults(
            ignore: ":hidden:not(.post-content)"
);

有什么想法吗？

【问题讨论】：

首先，您需要检查渲染的 DOM 并向我们展示此处的代码；只是相关的 javascript 和 HTML。其次，输入错误，而不是向我们显示屏幕截图，这对于 SO 搜索引擎来说更难阅读且无用。

请查看更新后的问题

@UmutEsen 见jquery-validation/jquery-validation#1875 (comment)

【参考方案1】：

我使用这个脚本告诉验证器忽略 Summernote 元素。可以对其进行调整以忽略其他 HTML 编辑器生成的元素。

$('form').each(function () 
    if ($(this).data('validator'))
        $(this).data('validator').settings.ignore = ".note-editor *";
);

【讨论】：

但是即使填写了必填字段也无法提交表单。如何仅验证选定的字段？

【参考方案2】：

没有硬编码 ID 的最干净的方法来自 JQuery.Validate github 讨论它自己：

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

来源：https://github.com/jquery-validation/jquery-validation/issues/1875

【讨论】：

这对 Summernote 0.8.16 非常有效，但我错误地在我的 jQuery 就绪函数中设置了这些默认值。到那时为时已晚，我认为在此之前将默认值复制到附加到特定表单的验证器实例中，因此设置默认值无效。

我使用的是 Summernote 0.8.18。我只是将此代码放在

【参考方案3】：

如果您在使用 jQuery 验证器验证表单时遇到 quill（富文本编辑器）问题，只需执行以下操作：

$('#id-of-form-to-validate').validate(
  ignore: ".ql-container *"
  // continue validation
);

“#id-of-form-to-validate”可以简单地是一个 id、类或表单元素。

【参考方案4】：

您可以通过稍微调整代码来解决上述错误。

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

来源（官方）：https://github.com/jquery-validation/jquery-validation/issues/1875#issuecomment-272667183

【参考方案5】：

我尝试了上述答案，但在我的情况下不起作用。 这个对我有用：

jQuery.validator.setDefaults( ignore: ":hidden:not(#summernote),.note-editable.panel-body");

【参考方案6】：

在validation.js中替换代码

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

【参考方案7】：

此代码适用于我

$("#commentForm").validate(
    ignore: ".note-editor *"
  );

【参考方案8】：

我在测试jQuery TE 时发现了这个线程，并且出现了相同的验证器错误，可以使用类似的解决方案来修复。

$('#id-of-form-to-validate').validate(
    ignore: ".jqte *"
    // continue with validation
);

【参考方案9】：

此代码适用于我：

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

【参考方案10】：

此代码段删除错误并继续验证：

$.validator.setDefaults( ………… 忽略：“:hidden:not(textarea), [contenteditable='true']:not([name])”, ………… );

【参考方案11】：

标签插件也有这些未命名的动态字段，所以你也可以添加一个全局验证参数：

ignore: ".tagify [contenteditable], .my-class [contenteditable]"

jQuery：3.5.1

jQuery 验证插件 v1.19.3