jQuery Validate + Ckeditor 驗證 textarea 解決方式

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/