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/