jQuery Validate + Ckeditor 驗證 textarea 解決方式

最新推荐文章于 2025-08-14 17:31:00 发布

转载最新推荐文章于 2025-08-14 17:31:00 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mbtq/p/4514176.html

文章标签：

#javascript #ViewUI

本文介绍如何结合jQuery Validate插件与Ckeditor实现富文本框的内容验证。主要内容包括通过DATA-API模式初始化Ckeditor，在表单提交前更新Ckeditor实例的数据，并通过调整jQuery Validate的设置确保错误提示能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery Validate + Ckeditor 驗證 textarea 解決方式

html

<textarea name="content" id="content" class="ckeditor" placeholder="請輸入內容" rows="24" cols="80"></textarea>

class=ckeditor 會使用 DATA-API 模式自動初始化

javascript

$(document).ready(function(){
    //bind submit to update textarea from ckeditor 
    $('#form').submit(function(){
        $('textarea.ckeditor').each(function () {
           var $textarea = $(this);
           $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
        });
    });

    //validate
    $('#form').validate({
        rules: {
            content: {
                required: true
            }
        },
        ignore: '',
        errorPlacement: function(error, element) {
            if (element.attr('name') == 'content') {
                error.insertAfter($(element).parent().children().last());
            } else {
                error.insertAfter(element);
            }
        }
    });
});

form submit 必須要放在 validate 之前宣告

在 jquery validate 的 rules 裡面將 ignore 設定成為空值

並且在 form submit 的時候更新 ckeditor 的 instance

最後再更改 jquery validate 的 errorPlacement 讓 label.error 可以顯示在正確的位置，之後即可解決這個問題。

来自：http://oommgg.net/2011/11/jquery-validate-ckeditor-%E9%A9%97%E8%AD%89-textarea-%E8%A7%A3%E6%B1%BA%E6%96%B9%E5%BC%8F/