javascript - 带有 CKEditor 的 jQuery 验证插件

Question

我知道之前有人问过这个问题，并且我已经阅读了所有以前的问题，但我仍然无法让 jQuery 验证器正确验证 CKEditor 字段。

我的表格如下：

<form id="faq-form">
    <p>
        <label>Title:</label>
        <input type="text" id="faq-title" name="faq-title" class="faq-title" />
    </p>
    <p>
        <label for="question">Question:</label>
        <textarea name="question" id="question"></textarea>
    </p>
    <p>
        <label for="answer">Answer:</label>
        <textarea name="answer" id="answer"></textarea>
    </p>            
    <p>
        <input id="submit-faq" name="submit-faq" type="submit" value="Submit" />
    </p>
</form>

两个文本区域都使用以下方法转换为 CKEditor 字段：

<script>
CKEDITOR.replace('question', { toolbar : 'forum' });
CKEDITOR.replace('answer', { toolbar : 'forum' });
</script>

当我尝试验证时，只有标题字段得到验证。我不确定我做错了什么。这是我用于验证的 javascript 代码（以下位于 jQuery 文档就绪函数中）。

$('#faq-form').submit(function() {
    // Update textareas with ckeditor content
    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();
        $.trim($('#' + i).val());
    }

    // Validate the form
    if ( ! $('#faq-form').validate({
        rules: {
            'faq-title': {
                required: true,
                minlength: 5
            },
            answer: {
                required: true,
                minlength: 20
            },
            question: {
                required: true,
                minlength: 20
            }
        }
    }).form()) {
        console.log('Form errors');
        return false;
    }

验证完成后，我将使用 $.post 方法而不是普通的表单获取或发布，这样我就可以在不重新加载的情况下更新我的页面。$.post 出现在验证方法之后，但我认为没有必要显示。

score 6 · Accepted Answer

我终于能够让它工作了。CKEditor 在运行时会隐藏文本区域，而 jQuery 验证器会忽略隐藏的元素。在 validate 函数中，这可以更改。所以我的新代码如下：

if ( ! $('#faq-form').validate({
    ignore: "input:hidden:not(input:hidden.required)",
    rules: {
        'faq-title': {
            required: true,
            minlength: 5
        },
        answer: {
            required: true,
            minlength: 20
        },
        question: {
            required: true,
            minlength: 20
        }
    },
    messages: {
        'faq-title': {
            required: "The title field is required"
        },
        answer: {
            required: "The answer field is required"
        },
        question: {
            required: "The question field is required."
        }
    },
    errorElement: "span",
    errorPlacement: function (error, element) {
        error.appendTo(element.prev());
    }
}).form()) {
    console.log('Form errors');
    return false;
}

我还添加了消息并在显示错误时修改了错误的元素和位置。我认为这可能对其他偶然发现此问题的人有所帮助。

score 1 · Accepted Answer

好吧，让我们把它剪下来，我花了几个小时在正确的位置获取 CKEditor 的错误消息，因为每次它出现在 CKEditor 的顶部或看起来不太好看的标签之后。

由于 CKEditor 隐藏了 textarea 并将其 span 标签放在 textarea 之后。请使用浏览器工具检查 dom 元素，然后您可以看到 textarea 被隐藏。

我刚刚调整了代码以获取 CKEditor 下的错误消息标签/跨度。

        $('#messageForm').validate(
          {
              ignore: 'input:hidden:not(input:hidden.required)',
              rules: {
                  msgTitle: {
                      minlength: 2,
                      required: true
                  },
                  msgText: {
                      minlength: 2,
                      required: true
                  }
              },
              errorElement: "span", // can be 'label'
              errorPlacement: function (error, element) {
                  if ($(element).attr('id') == 'msgText') {
                      $('#cke_msgText').after(error);
                  } else {
                      element.after(error);
                  }
              },
              highlight: function (element) {
                  $(element).closest('.form-group').removeClass('text-success').addClass('error');
              },
              success: function (element) {
                  element
                      .closest('.form-group').removeClass('error').addClass('text-success');
              }
          });

这里，'msgText'是被隐藏的textarea的id，cke_msgText是ckeditor的id，你可以通过查看dom元素找到id，也许ckeditor取了textarea的id属性，加上前缀'cke_'。

score 0 · Accepted Answer

我的猜测是 CKEditor 不能很好地进行验证，至少在默认情况下是这样。您需要在验证之前删除编辑器（CKEditor 的工作原理是隐藏正在编辑的内容，然后插入 iframe 并将可编辑的内容粘贴在其中；当您删除编辑器时，它会关闭 iframe 并复制内容 - 在至少这是从记忆中）。我的猜测是，如果您检查 DOM，您会发现 textareas 的内容没有改变。

您可能会发现 NicEdit 在这种情况下更有用 - 请参阅此线程：

https://stackoverflow.com/questions/3914510/wysiwyg-editor-without-iframe

score 0 · Accepted Answer

你的代码：

$('#faq-form').submit(function() {

    // Update textareas with ckeditor content
    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();
        $.trim($('#' + i).val());
    }

    if ( ! $('#faq-form').validate({
        rules: {
            'faq-title': {
                required: true,
                minlength: 5
            },
            answer: {
                required: true,
                minlength: 20
            },
            question: {
                required: true,
                minlength: 20
            }
        }
    }).form()) {
        console.log('Form errors');
        return false;
    }
    ....

您不应该.validate()在条件内使用。这就是该.valid()方法的用途。 .validate()仅用于使用您的规则和选项在 DOM 上初始化插件一次。初始化后，.valid()可以在条件内部使用来触发测试并返回布尔值。

此外，你不应该有.validate()内部submit处理程序。该插件有它自己的submitHandler回调函数。

您的代码应更改为：

$(document).ready(function() {

    $('#faq-form').validate({ // initialize the plugin
        // rules & options,
        rules: {
            'faq-title': {
                required: true,
                minlength: 5
             },
             answer: {
                required: true,
                minlength: 20
             },
             question: {
                required: true,
                minlength: 20
             }
        },
        submitHandler: function (form) {
             // Update textareas with ckeditor content
             for (var i in CKEDITOR.instances) {
                 CKEDITOR.instances[i].updateElement();
                 $.trim($('#' + i).val());
             }
        }
    })

    if ( ! $('#faq-form').valid() ) { // test the form for validity
        console.log('Form errors');
        return false;
    }

});

score 0 · Accepted Answer

迄今为止我发现的最佳解决方案，简单而优雅：

    $('#form1').validate({
        ignore: [],
        rules: {
            corpo : {
                required: function()
                {
                    CKEDITOR.instances.corpo.updateElement();
                }
            }
        }
    })

字体：http ://devlog.waltercruz.com/usando-ckeditor-e-jquery-validate-juntos

score 0 · Accepted Answer

    <form>
        <textarea class="ckeditor" id="noticeMessage" name="message"></textarea>
    </form>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>



    <form>
        <textarea class="ckeditor" id="noticeMessage" name="message"></textarea>
    </form>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        $("form").submit( function() {
            var messageLength = CKEDITOR.instances['noticeMessage'].getData().replace(/<[^>]*>/gi, '').length;
            if( !messageLength ) {
                alert( 'Please enter a message' );
            }
        }
    </script>

see for full reference
----------------------

http://christierney.com/2012/12/14/ckeditor-4-required-field-validation/

javascript - 带有 CKEditor 的 jQuery 验证插件

6 回答 6

Related