web-dev-qa-db-ja.com

jQuery Validate with Summernote Editor error：cannot read property 'replace' of undefined

MVC5を使用して、サマーノートエディターでフォームを作成しています。

かみそりコード：

<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 Validateバージョン：1.16.0

Microsoft.jQuery.Unobtrusive.Validationバージョン：3.2.3

私はいくつかの調査を行いましたが、これはsummernoteプラグインとは関係がないことをすでに知っています。次のコードをドキュメントの内部と外部で実行しようとしましたが、機能しませんでした。

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

何か案は？

javascriptjqueryrazorasp.net-mvc-5jquery-validate
12
umutesen

このスクリプトを使用して、検証プログラムにSummernote要素を無視するように指示します。他のHTMLエディターによって生成された要素を無視するように調整できます。

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

上記のエラーは、コードを少し調整することで解決できます。

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

5
Kalpit

JQueryバリデーターでフォームを検証するときに quill （リッチテキストエディター）でこの問題が発生した場合は、次の手順を実行してください。

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

「＃id-of-form-to-validate」は、単にid、クラス、またはフォーム要素にすることができます。

1
Nicholas Mberev

Quill （リッチテキストエディター）でも同じ問題が発生しましたが、次の方法で解決しました。

<div id="quillEditor"></div>

var editorForm = $('.rich-text-editor').closest('form');
if (editorForm.data('validator')) {
    // tell jQuery Validate to ignore all child elements of quill
    editorForm.data('validator').settings.ignore = ".ql-container *";
}
1
Hooman Bahreini

ハードコードされたIDを使用しない最もクリーンなアプローチは、JQueryから来ています。

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

1
Bjego

上記の回答を試しましたが、私の場合はうまくいきませんでした。これは私のために働きます：

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

テスト中にこのスレッドが見つかりました jQuery TE と同じ検証エラーが表示されましたが、同様のソリューションで修正できます。

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