Jquery 验证和 Summernote

Question

我已经成功地并排运行了一段时间的 jquery 验证和summernote。

它正在工作，现在我在 form.valid() 上遇到错误。 note 字段不需要验证。

我已将我的代码精简到最低限度，并削减了忽略设置 - 如果我删除它可以工作的忽略设置，如果我有忽略设置，它会中断，并出现“验证器未定义”错误

我已经设置了一个小提琴，所以你可以看到它工作和不工作，它目前设置为不工作

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

任何想法将不胜感激

谢谢 詹姆斯

Answer 1

我也有类似的问题。

首先，您可以将jquery.validate 设置为忽略隐藏字段（IIRC，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。也许我遗漏了一些东西，但我并没有真正看到将其作为一种形式的意义。

不建议更改此代码（您可能想要更新到较新的版本，从而丢失您的更改...），但在他们解决之前，这是一个足够好的修复。

Answer 2

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

var validateform = function () {

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

Answer 3

我也遇到了同样的问题，原来summernote有没有名字的隐藏字段。验证失败，您可以忽略这些字段，也可以像我一样转到summernote js js代码并添加一个名称。 希望这会有所帮助。

输入字段用于弹出summernote的模式以添加ur.