- 出现情况
使用jQuery validate 校验表单的时候,如果给textarea绑定富文本,就会使得textarea无法校验。
插件版本:
kindeditor 4.1.11
jquery 1.11.1
jquery.validate 1.15.0
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hello</title>
</head>
<body>
<form id="addForm" action="/web/article/add_article.htm" method="post" enctype="multipart/form-data">
文章内容:<textarea id="content" name="content" ></textarea><br/><br/>
<input type="button" id="addArticle" value="提交"><br/><br/><br/>
</form>
<script type="text/javascript" src="/kindeditor/kindeditor-all.js"></script>
<script type="text/javascript" src="/kindeditor/lang/zh-CN.js"></script>
<script type="text/javascript" src="/js/jquery.js" ></script>
<script type="text/javascript" src="/js/jquery.validate.js" ></script>
<script type="text/javascript" src="/js/additional-methods.js" ></script>
<script type="text/javascript">
KindEditor.ready(function(K) {
window.editor = K.create('#content',{
uploadJson : "/kindeditor/jsp/upload_json.jsp",
fileManagerJson : "/kindeditor/jsp/file_manager_json.jsp",
allowFileManager : true,
afterBlur : function(){this.sync();}
});
});
$("#addForm").validate({
rules:{
content:{required:true}
},messages:{
content:{required:"请编辑文章内容"},
},errorPlacement:function(error, element){
error.insertAfter(element.next());
}
});
$("#addArticle").click(function(){
if($("#addForm").valid() == true){
$("#addForm").submit();
}
});
</script>
</body>
</html>
上面的代码,富文本内不输入任何东西,点击“提交”。发现表单会直接提交,校验无效。
- 不执行校验 原因及解决方法
原因:
调试页面可以发现,创建富文本输入框后,原先的textarea被隐藏。
然而通过可以validate的源码可以看到,validate不会校验隐藏的属性。
解决方法(两种方法):
1、把validate源码中【ignore: ":hidden"】修改为【ignore: ""】
2、在页面的js中添加【$.extend($.validator.defaults,{ignore:""});】
- 校验不通过 原因及解决方法
根据上面的方法修改后,打开页面,富文本中不输入任何东西,点击“提交”按钮,富文本后面显示了“
请编辑文章内容”的提示。但是再在富文本中输入内容后,表单无法提交。
原因:调试页面发现content的内容为空,说明富文本中的值并未赋值给content。
解决方法:
失去焦点的时候,将富文本的值同步给content。