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/