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/

05-08 15:13