Jquery 验证和 Summernote

Question

我一直成功地同时运行jQuery验证和Summernote。

现在，form.valid()出现错误。请注意，备注字段不需要验证。

我已将代码简化到最低限度，并缩小了忽略设置-如果我删除忽略设置，则可以正常工作；如果有忽略设置，则会出现“validator未定义”错误。

我已经为您设置了一个fiddle，以便您可以查看它的工作状态和不工作状态。目前，它被设置为不起作用。 http://jsfiddle.net/JGuymer/83q0r21s/22/

<form id="form">   
<textarea id="textarea"></textarea>
<a id="clickme" href="#">click Me</a>
</form>

JQuery：

$(document).ready(function() {
    $("#textarea").summernote();
    //uncomment to work
    //$('#form').validate();       
    //uncomment to fail
    $('#form').validate({ignore:[]})     
    $("#clickme").click(function(){      
        validate();         
        return false;
    })
});

function validate() {
 if ($('#form').valid()) {
 alert('valid');
 }
}

希望能得到您的任何想法

谢谢 詹姆斯

- JGuymer

---

你有解决这个问题吗？我遇到了同样的问题，在网上很难找到任何相关信息。 - user752746

嗨，我刚刚回滚到v0.5.1，现在它又可以工作了。Summer Note存在一个未解决的问题。https://github.com/HackerWins/summernote/issues/539 - JGuymer

@JGuymer，以下链接中已经解释并回答了此问题：https://dev59.com/TFgQ5IYBdhLWcg3w4n3z#45061953 - Ninja

Answer 1

我有一个类似的问题。

首先，你可以将 jquery.validate 设置为忽略隐藏字段（如果我没记错，summernote 有相当多的隐藏字段），除了那些你想要验证的字段：

$.validator.setDefaults({ ignore: ":hidden:not(.class-of-hidden-field-i-want-to-validate-1, class-of-hidden-field-i-want-to-validate-2, class-of-hidden-field-i-want-to-validate-3...) }); 

那对我起了作用。

此外，每当我与添加链接的模态对话框交互时（summernote v0.5.10），我会得到

Uncaught TypeError: Cannot read property 'settings' of `undefined`

在 jquery.validate.js:360 上。

看了一下 summernote.js，我可以发现他们有：

var tplDialog = function (className, title, body, footer) {
        return '<div class="' + className + ' modal" aria-hidden="false">' +
                 '<div class="modal-dialog">' +
                   '<div class="modal-content">' +
                     (title ?
                     '<div class="modal-header">' +
                       '<button type="button" class="close" aria-hidden="true" tabindex="-1">&times;</button>' +
                       '<h4 class="modal-title">' + title + '</h4>' +
                     '</div>' : ''
                     ) +
                     '<form class="note-modal-form">' + // ERROR CAUSE
                       '<div class="modal-body">' +
                         '<div class="row-fluid">' + body + '</div>' +
                       '</div>' +
                       (footer ?
                       '<div class="modal-footer">' + footer + '</div>' : ''
                       ) +
                     '</form>' + // ERROR CAUSE
                   '</div>' +
                 '</div>' +
               '</div>';
    };

我的（临时）解决方案是在我标记为// ERROR CAUSE的行中将form替换为div。也许我错过了什么，但我真的不明白为什么那应该是一个表单。

不建议更改此代码（您可能希望更新到较新版本，从而失去您的更改...），但这是一个足够好的解决方案，直到他们解决它。

- user1987392

Answer 2

我遇到了同样的问题。 我把问题追溯到了名为“note-modal-form”的子表单。 为了解决这个问题，我在初始化部分添加了以下内容：

var validateform = function () {

    $('.note-modal-form').each( function() { $(this).validate({}) });
...     

- Yannis Ps

Answer 3

我遇到了同样的问题，原来是summernote有一些没有名称的隐藏字段。这在验证时会失败，你可以忽略这些字段，或者像我一样去summernote的js代码中添加一个名称。 希望能对你有所帮助。

输入字段是为了弹出summernote的模态框而存在的，用于诸如添加URL之类的操作。

- Razor Mureithi

---

请**[编辑]**您的帖子，将实际代码显示为文本而不是截图。其他人无法从您的图片中复制和粘贴。有关详细信息，请参见此处：https://meta.stackoverflow.com/a/285557/1402846。谢谢。 - Pang